sass

sass入门
1.下载安装koala工具，安装后，output style选择 'compressed' 压缩生成的css
2.项目中新建sass文件夹，存放所有.scss文件
3.把sass文件夹拖到koala，保存.scss文件后，会生成与sass文件夹同级的css文件夹，并生成编译后的css文件
4.官方文档 https://www.sass.hk/
5.koala 教程 http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

 变量、混合器、继承

a.scss

@charset "utf-8";
@import "test"; // 引入 _test.scss文件，可省略后缀和下划线   下划线表示，该文件是部分文件，编译时不生成相应的css文件
$nav-color: #f00; // 该注释编译时会被忽略， 推荐中划线变量，
// sass中  $nav-color 和 $nav_color 中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。
.a {
  $width: 100px; /* 该注释编译时会保留， 局部变量 */
  width: $width;
  color: $nav-color;
  height: 100px;
  border: {
    style: solid; // 属性可以这样写，【生成的样式变多了】，也可以  boder:1px solid red;
    width: 1px;
    color: #ccc;
  }
}

//2.基本嵌套,跟 less 一样
.b {
  border: 1px solid green;
  .c {
    color: red;
    font-size: 20px;
  }
}

// 3 父元素标识符  &
.d a {
  color: blue;
  &:hover {
    color: black;
  }
  body.ie & { // 可以更换顺序  最终生成   body.ie .d a{color:red;}
    color: red;
  }
}

// 4 群组选择器的嵌套，【生成的样式变多了】（少用）  + > ~ 少用
.container {
  h1, h2, h3 { // 少用
    margin-bottom: 2px;
  }
}

.nav, aside {
  a { // 少用
    color: blue;
  }
}

// 5 boder属性
.e {
  border: 1px solid #4caf50 {
    left: 3px;
    right: 5px;
  }
}

// 6 导入 sass 文件，   .ff{@import 'test'}  少用
// 引入.css文件，要把 .css改为 .scss
.f {
  $my-color: pink;
  color: $my-color;
}

// 混合器 复制样式
@mixin rounded-corners {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.g {
  border: 1px solid green;
  @include rounded-corners // 引入混合器
}
.h{
  font-size: 30px;
  @include rounded-corners
}

@mixin link-color($normal,$hover,$visited) {
  color: $normal;
  &:hover {
    color: $hover;
  }
  &:visited {
    color: $visited;
  }
}

.h {
  a {
    @include link-color(   //  按顺序传参  @include link-color(blue,green,red)
    $normal:blue,   // 可乱序以对象形式传参
    $visited:red,
    $hover:green
    )
  }
}
// 选择器继承   【生成的样式变多了】，只要  <div class="serious-error">sssss</div>  就包括.error的样式了
.error{
  border:1px solid red;
}
.serious-error{
  @extend .error;
  font-size: 20px;
}

 _test.scss

@charset "utf-8";  // 添加utf-8 注释才不会报错
$my-color:yellow !default; // 添加默认值，其他文件引用后，如果再定义，则用新值，没定义则用默认值

 b.scss

@charset "utf-8";
$version: '1.0'; // 添加版本号，注意写法    #{} 把变量包起来
/* this is version #{$version}*/
.main {
  color: black;
  &-siderbar { // & 拼接样式名
    border: 1px solid red;
  }
}

// 局部变量转换为全局变量
.a {
  $width: 5px !global; // 转成全局变量
  width: $width;
}

.b {
  width: $width;
}

// sassScript
// string    生成   .firefox .header:before{ ...}
@mixin message($selector) {
  .firefox #{$selector}:before {
    content: 'hi,firefox'
  }
}

@include message('.header');
//  运算
.c {
  $width: 100px;
  width: $width*2;
  height: (100px/3);
  border: 1px solid green;
}

.hoverlink {
  @extend a:hover; // extend有各种复杂的用法，见文档
}

a:hover {
  text-decoration: underline;
}

// @if
$type: monster; //  if .. else ..
.d {
  @if $type== monster {
    color: red;
  } @else {
    color: black;
  }
}

// @for
@for $i from 1 through 3 { // for循环 。。。
  .item-#{$i} {
    width: 2px*$i;
  }
}

// #each
@each $animal in img1, img2, img3, img4 { // 批量生成样式
  .#{$animal}-icon {
    background-image: url("../images/#{$animal}.png");
  }
}

@each $animal, $color, $cursor in (puma, black, default), // 批量生成啊！
        (sea-slug, blue, pointer),
        (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

@mixin my-border($width,$color:blue) { //有默认值的参数必须放在最后   @mixin my-border($color:blue,$width)  就报错
  border: {
    width: $width;
    color: $color;
    style: solid;
  }
}

.h {
  @include my-border(2px, green)
}

.i {
  @include my-border($color: red, $width: 33px)
}

@mixin my-boxshadow($shadows...) { // ...
  -webkit-box-shadow: $shadows;
  -moz-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include my-boxshadow(0px 4px 5px #666)
}

// 函数指令
$grid-width: 40px;
$gutter-width: 10px;
@function get-width($n) {
  @return $n*$grid-width+($n - 1) * $gutter-width;
}

.k {
  width: get-width(5)
}

 compass是sass的工具库，koala内置compass,需要添加config.rb文件，  添加后，把包含sass文件夹和config.rb的父文件夹重新拉到koala中，config.rb配置文件就生效了

config.rb配置详解   http://www.sassplus.com/sass/152.html       谷歌f12、再按f1有其他配置

require 'compass/import-once/activate'
# 防止引入重复文件
# Require any additional compass plugins here.

# cache = false
# 删除缓存文件  .sass-cache
sourcemap = true
# chrome 调试 scss

# Set this to the root of your project when deployed:
# 文件目录
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"

# output_style = :expanded or :nested or :compact or :compressed
# 编译后的css的显示形式
output_style = :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# compass生成精灵图时路径不对， relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# 取消编译后的css注释（nested模式有一大堆注释）， line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass