SASS用法

编译

sass的编译命令：sass input.css output.css
真正使用场景下可以对整个文件夹进行监听，即时地进行编译：sass --watch app/sass:public/stylesheets

sass --watch 错误处理
当.scss文件中有中文字符时，比如：font-family:"微软雅黑"，执行sass --watch或sass input.css output.css可能会报error No such file or directory @ rb_sysopen --sass错误。
找到ruby的安装目录下的lib=>ruby=>gems=>2.X.X=>gems=>sass-3.X.X=>lib=>sass文件夹下的engine.rb文件，在所有的require最后加上Encoding.default_external = Encoding.find('utf-8')这段代码。

变量

sass允许使用变量，以$开头。
如果变量需要写在字符串中，就必须要写在#{}之中

$fontColor : #45fd3e;
$side_left:left;
div.header {
    color: $fontColor;
    width: 200px;
    height: 100px;
    border-#{$side_left}-color: red;
    border-#{$side_left}-width: 2px;
    border-#{$side_left}-style: solid;
}

嵌套

sass允许选择器嵌套，就像html的DOM结构一样。

ul {
    list-style:none;
    li {
        height: 30px;
        line-height:30px;
    }
}

在嵌套的代码块内，可以使用&引用父元素。

a {
    text-decoration:none;
    &:hover {
        color:#43afd2;
    }
}

引入（import）

每个单独的scss都是一个模块，模块一般用下划线开头来命名。如_base.scss，这样sass就能识别出来这是一个模块，然后通过@import就可以引入模块。

// _base.scss
* {
    margin:0;
    padding:0;
    font:normal 16px '微软雅黑';
    color:#333
}
div.header {
    color: $fontColor;
    width: 200px;
    height: 100px;
    border-#{$side_left}-color: red;
    border-#{$side_left}-width: 2px;
    border-#{$side_left}-style: solid;
}

// index.scss
$fontColor : #45fd3e;
$side_left:left;
@import 'base';
ul {
    list-style:none;
    li {
        height: 30px;
        line-height:30px;
        a {
            text-decoration:none;
            &:hover {
                color:#43afd2;
            }
        }
    }
}

编译为css之后：
// index.css
@charset "UTF-8";
* {
margin: 0;
padding: 0;
font: normal 16px '微软雅黑';
color: #333;
}

div.header {
  color: #45fd3e;
  width: 200px;
  height: 100px;
  border-left-color: red;
  border-left-width: 2px;
  border-left-style: solid; 
}

div.header {
  color: #45fd3e;
  width: 200px;
  height: 100px;
  border-left-color: red;
  border-left-width: 2px;
  border-left-style: solid; 
}

ul {
  list-style: none; 
}
ul li {
  height: 30px;
  line-height: 30px; 
}
ul li a {
  text-decoration: none; 
}
 ul li a:hover {
   color: #43afd2;
 }

混合器（mixin）

使用@mixin可以定义一个代码块，这个代码块可以被重用，使用@include可以调用这个mixin。mixin可以指定参数和参数的缺省值。使用的时候根据需要，加入参数。

@mixin border-radius($radius:10px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
div.circle {
    width: 100px;
    height: 100px;
    background: #660099;
    @include border-radius(50px)
}

继承（extend）

sass允许一个选择器，继承另一个选择器。使用@extend命令。

.father {
    height: 30px;
    padding:0 10px;
    border:1px solid #006699;
}
.son {
    @extend .father;
    border-color:#884df3;
}

运算

sass允许在代码中使用算式：

div {
    width: 50px * 2;
    height: (200px/2);
    background: #660099;
}

注释

sass有两种注释风格。标准的css注释/* 这是注释掉的内容 */和单行注释// 这是注释掉的内容，标准的css注释会保留到编译后的文件，单行注释只保留在scss源文件中，编译后被省略。

自定义函数

sass允许用户编写自己的函数
@function double($n){
    @return $n * 2;
}
div.sidebar {
    width: double(5px);
}