前端学习笔记-SASS的使用
1. SASS简介
学过CSS的人都知道，它不是一种编程语言，你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事
很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件，其中SASS就是其中一种。
什么是SASS/LESS：SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
直白的说就是：css可以打破常规的编写方式，类似编程语言一样，可以用变量、计算、嵌套、代码继承（即代码复用）、还可以插入文件等方式编写css样式，但最后需要用到sass将其编译后生产css文件后使用。
2. 安装ruby
ruby下载地址： http://rubyinstaller.org/downloads
用法 ： http://www.w3cplus.com/sassguide/install.html
3.安装sass
3.1 安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
3.2. 使用命令行 (由于国外网络问题，这里需要使用淘宝镜像)
3.2.1, 首先移除掉rubygems.org
gem sources --removehttps://rubygems.org/
3.2.2, 然后换用 ruby-china镜像服务
gem sources -ahttp://gems.ruby-china.org/
3.2.3, 安装好后检查当前SOURCES列表：
gem sources -l
3.2.4, ruby镜像跟换后,现在来安装sass
gem install sass
3.2.5, 安装成功后,可查看sass是否已经安装好,
sass -v
3.2.6, sass的其他命令
更新sass gem update sass
查看sass帮助sass -h
4. 使用sass
4.1， SASS编译
项目中的样式文件用.scss文件编写，并按照sass语法，然后用sass将scss文件编译成css文件，再将编译后的css文件导入项目中
查看sass文件的内容 sass test.scss
编译成css文件sass test.scss test.css
4.2， SASS提供四个编译风格的选项
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
常用： sass --style compact test.sass test.css
4.3， SASS监听文件或目录，一旦源文件有变动，就自动生成编译后的版本.
监听文件sass --watch input.scss:output.css
监听文件夹sass --watch app/sass:public/stylesheets
5. Sass基本语法
5.1，变量
SASS允许使用变量，所有变量以$开头
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
5.2，计算功能
SASS允许在代码中使用算式：
5.3，嵌套
SASS允许选择器嵌套
属性也可以嵌套，比如border-color属性
可以使用&引用父元素。比如a:hover伪类
//定义变量
$width: 200px;
$left: left;
div {
width: $width;
//计算
height: $width + 200px;
background: red;
//嵌套
ul {
border: {
width: 5px;
style: dashed;
color: purple;
};
border-#{$left}: 3px solid blue;
}
&:hover {
background: orange;
}
}5.4，代码重用-继承
SASS允许一个选择器，继承另一个选择器，使用@extend。
//继承
.class1 {
width: 200px;
height: 200px;
}
div {
@extend .class1;
background: red;
}5.5，代码重用-@mixin
使用@mixin命令，定义一个代码块。
使用@include命令，调用这个mixin
//混合
@mixin a {
width: 200px;
height: 200px;
}
div {
@include a;
background: red;
}
//带参混合
@mixin a($w:200px){
width: $w;
height: 200px;
}
div {
@include a(300px);
background: red;
}
5.6，注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息
/*!
重要注释！
*/
5.7，插入文件
@import命令，用来插入外部文件scss或css。