SASS简介及使用方法

SASS简介及使用方法
一、什么是Sass
Sass(Syntactically Awesome StyleSheets)是css的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。

这里是官方文档。

二、基本语法
1）变量
sass的变量名必须是一个$符号开头，后面紧跟变量名。

如：
默认变量：仅需在值后面加入 !default即可，默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值
多值变量：多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象
list : 可通过空格，逗号或小括号分割多个值，使用nth($变量名, $索引)取值
map: 数据以key和value组成，格式：$map: (key1: value1, key2: value2); 通过map-get($map, $key);
2）计算功能
sass允许使用算式。

3）嵌套标签嵌套
属性嵌套：
4）注释
sass有两种注释风格
标准css注释： /* 注释 */，会保留到编译后的文件中，压缩则删除
单行注释： // 注释
在标准注释/*后面加入一个感叹号，表示重要注释，压缩模式也会保留注释，用于版权声明等。

/*! 重要注释 */
5）继承
sass 中，选择器继承可以让选择器继承另一个选择器的所有样式
使用占位符选择器 %
从sass3.2.0后，就可以定义占位选择器%，这个的优势在于，不调用不会有多余的css文件
6）混合(mixin)
sass中使用@mixin声明混合，可以传递参数，参数名义$符号开始，多个参数以逗号分开，如果参数有多组值，那么在变量后面加三个点表示，如： $var...
@content：在sass3.2.0中引入，可以用来解决css3中@meidia 或者 @keyframes 带来的问题。

它可以使@mixin接受一整块样式，接收的样式从@content开始
7）颜色函数
sass提供了一些内置的颜色函数
8）引入外部文件
使用@import 命令引入外部文件，引入后，可使用外部文件中的变量等。

三、高级用法
1）函数 function
sass允许用户编写自己的函数，以@function开始
2）if条件语句
@if语句可以用来判断
三目判断：语法为 if($condition, $if_true, $if_false)。

三个参数分别表示：条件，条件为真的值，条件为假的值
3）循环语句
for循环有两种形式，分别为：@for $var from <start> through <end> 和@for $var from <start> to <end>。

$var 表示变量，start表示开始值，end表示结束值，两种形式的区别在于 through 包
括 end 的值，to 不包括 end 值。

while循环
@each循环：语法为@each $var in <list or map>。

其中$var
表示变量，而list和map表示数据类型，sass3.3.0新加入多字段循环和map数据循环
单字段list数据循环
虎课网设计坞
多字段list数据循环。