SASS简介及使用方法

Sass（Syntactically Awesome StyleSheets）是CSS的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。

Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。

Sass是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

在使用Sass时，首先需要创建一个.scss文件，然后按照Sass特定的语法格式来写样式。变量以美元符号（$）作为开头，使用冒号（:）赋值。写完样式之后，再将.scss文件执行一次编译，生成.css文件。

使用SASS的方法如下：

1. 安装SASS。SASS是Ruby语言写的，但是两者的语法没有关系。即使不懂Ruby，也可以使用SASS。但是必须先安装Ruby，然后再安装SASS。假定已经安装好了Ruby，接着在命令行输入“gem install sass”命令，就可以进行安装。
2. 使用SASS。SASS文件是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。可以使用四个编译风格的选项：* nested：嵌套缩进的css代码，它是默认值；* compact：简洁格式的css代码；* compressed：压缩的css代码；* expanded：展开的css代码。
3. 变量引用。在Sass中，可以使用变量来存储颜色、字体等常用的值。变量以开头，例如：font-stack: Helvetica, sans-serif; primary-color: #333。然后在样式中使用变量，例如：body { font: 100% font-stack; color: $primary-color; }。如果变量需要镶嵌在字符串之中，就必须写在#{}之中。
4. 嵌套规则。Sass允许嵌套规则，这意味着可以在一个规则内部定义另一个规则。这使得样式更易于组织和阅读。例如：nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a{ display: block; padding: 6px 12px; text-decoration: none; } }。
5. 混合和函数。Sass还提供了混合和函数，这些功能可以重复使用代码块和执行计算。例如，可以创建一个混合来定义一个通用的边框样式：@mixin border-radius(radius) { -webkit-border-radius: radius; -moz-border-radius: radius;−ms−border−radius:radius; border-radius: $radius; }。然后在使用时调用混合：.box { @include border-radius(10px); }。
6. 运算符。Sass支持基本的数学运算符，如加、减、乘、除等。可以直接在样式中使用这些运算符进行计算。例如：grid−width:40px;gutter-width: 10px; columns: 12; .container { width: grid-width * columns+(gutter-width * ($columns - 1)); }