SASS学习笔记（一）
一、为什么使用SASS
CSS不是编程语言，没有变量、条件语句等等，只是单纯的描述，因此为CSS加入编程元素（即“CSS预处理器”）。其基本思想：用一种专门的编程语言进行网页设计，然后再编译成CSS文件。SASS作为其中一种“CSS预处理器”，有许多优点（便利的写法，节省时间，就像JS中的jQuery；简单、可维护），可以用来写CSS（总之就是一门写CSS的编程语言）
二、安装
类似于bootstrap是基于jQuery的，SASS是用Ruby语言写的（但是两者语法没有关联，没有Ruby的基础没关系），所以安装SASS之前必须先安装Ruby。
ps. 以下均在Windows7操作系统下
1）http://rubyinstaller.org/downloads/ 下载ruby（我选择的是Ruby2.2.3(x64)）
2）正常安装，选择框均全选（添加Ruby的bin文件夹到PATH用户变量和系统变量以使用 gem 命令工作。）
3）安装Ruby完毕后，win+r--cmd--enter 打开命令框，输入gem install sass，安装sass
4）不成功多试几次，安装成功即可使用sass了。
三、基本用法
1）变量，所有变量以$开头，如果变量镶嵌在字符串中，用#{}包含
$red:#f00;
$lside:left;
div{
color:$red;
border-#{$lside}-radius:10px;
}
2）计算功能，sass允许使用加减乘除算式
div{
width:100px+20px;
}
3）嵌套，sass可以将css中的包含选择器写成嵌套形式
3.1） 标签嵌套
css:
div h2{
color:red;
}写成sass：
div{
h2{
color:red;
}
}
3.2）属性嵌套（如border-color拆开成嵌套格式：如下）注意border后有冒号（想象成将-改成了：）
div{
border：{
color:red;
}
}3.3）用&引用父元素（如a:hover改成）
a{
&:hover{
color:red;
}
}
4）注释
/* */ 会保留到编译后的文件
// 单行注释，只保留在sass文件中，编译后被省略
/*! */ 重要注释，即使压缩也会也会被保留，常用于声明版权信息四、代码重用
1）继承，sass允许一个选择器继承另一个选择器，@extend 命令
.class1{
color : red;
}
.class2{
@extend : .class1;
}
2）Mixin，使用@mixin 命令定义代码块，用@include 调用这个代码块
2.1）@mixin left{
float:left;
}
div{
@include left;
}
2.2）用mixin指定参数和缺省值
@mixin left($value:20px){
float:left;
margin-left:$value;
}
div{
@include left(10px);
}五、颜色函数，指定颜色并用颜色函数（主要是加深或者减淡）生成系列颜色
lighten(#f00,20%)
darken(#f00,20%)
grayscale(#f00,20%)
complete(#f00)六、高级语法
1）插入文件，用@import命令
@import +路径2）条件语句，@if和@else (可以将@想象成if后面的括号)
2.1）
div{
@if width<3 {
width:20px;
}@else{
width:10px;
}
}2.2）循环语句，@for @while @each 用法同上
2.3）自定义函数，@function
@function double($n){
@return $n * 3;
}
div{
width:double(3px);
}参考资料： 阮一峰SASS用法指南