编译
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);
}