Saas详解
1. 特色功能 (Features)
- 完全兼容 CSS3
- 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令 (control directives)等高级功能
- 自定义输出格式
2. 语法格式 (Syntax)
Sass有SCSS和Sass这两种语法格式，扩展名分别是.scss 和.sass
3.安装
npm install -g sass4.语法规则
1.嵌套规则
scss代码
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}css代码
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }scss允许嵌套，避免一些不必要的重复，整个样式表的结构显得更加的清晰
2.父选择器 &
父选择器指的是在本身选择上面的一个选择器
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}hover选择器的父选择器就是a选择器
翻译成对应的css
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }3.属性嵌套
与第一条嵌套规则不同的是这条是属性可以嵌套，而第一条则是整个样式表可以嵌套，我们应该能够比较出二者的不同
scss代码
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}css代码
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }命名空间也可以包含自己的属性值，例如：
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}css代码
.funky {
font: 20px/24px;
font-family: fantasy;
font-weight: bold; } 4. 注释 /* */ 与 // (Comments: /* */ and //)
Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会.
5. SassScript
在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。
通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。
交互式的脚本Interactive Shell
脚本的基本语法
1.变量$
$width: 5em;变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：
SassScript 支持 6 种主要的数据类型：
- 数字，
1, 2, 13, 10px - 字符串，有引号字符串与无引号字符串，
"foo", 'bar', baz,通过#{ }可以将有引号字符串修改无引号字符串，这样便于在 mixin 中引用选择器名 - 颜色，
blue, #04a3f9, rgba(255,0,0,0.5) - 布尔型，
true, false - 空值，
null - 数组 (list)，用空格或逗号作分隔符，
1.5em 1em 0 2em, Helvetica, Arial, sans-serif数组 (lists) 指 Sass 如何处理 CSS 中
margin: 10px 15px 0 0或者font-face: Helvetica, Arial, sans-serif这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：
nth函数可以直接访问数组中的某一项；join函数可以将多个数组连接在一起；append函数可以在数组中添加新值；而@each指令能够遍历数组中的每一项。 -
maps, 相当于 JavaScript 的 object，
(key1: value1, key2: value2)
2.运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
scss代码
p {
width: 1in + 8pt;
}css代码
p {
width: 1.111in; }
/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。
以下三种情况 / 将被视为除法运算符号：
- 如果值，或值的一部分，是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}css代码
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值
3.插值语句#{ }
通过 #{} 插值语句可以在选择器或属性名中使用变量：
$name :foo;
$attr: border;
p.#{$name} {
#($attr)-color: blue;
}编译为
p.foo {
border-color: blue; }#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}编译为
p {
font: 12px/30px; }6.@-Rules 与指令
1.@import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
- 文件拓展名是
.css； - 文件名以
http://开头； - 文件名是
url()； @import包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
@import "foo";2.@media
Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。
3.@extend
继承某个样式
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
参考：Sass中文文档
学到react发现不会Sass,来补锅