SASS和SCSS

一种语言两种书写形式

• SCSS在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的
• SASS使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性

下面描述以SASS称呼这种语言

SASS功能

嵌套

嵌套减少了代码书写量，更好的把相关规则组织在一起。嵌套可分为选择器嵌套和属性嵌套。在选择器嵌套中可以使用&符号来引用父选择器。在属性嵌套中，属性可以有自己的值，也可以没有。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

SassScript

SassScript为语言添加了计算功能，它支持变量，运算（数学运算和逻辑运算），函数，插值语句

• 变量名称以$符号开头。变量类型有数字，字符串，颜色，布尔值，null，list和map
• 插值语句是用#{}括起来的表达式，可以用在选择器名上，也可以用在属性值上，作用的是可以去除字符的引号，避免进行数学运算

@-Rules和指令

Sass支持所有的CSS3 @-Rules，并定义了自己特有的指令。

• @import用于导入SASS文件，在导入文件中可以使用被导入文件中的变量和混合指令
• @media媒体查询
• @extend类似于面向对象中的继承，允许一个样式继续另一个样式所有规则
• @at-root
• @debug
• @warn

控制指令

控制指令类似于编程语言中的控制结构，可以根据条件选择输出样式，可以循环输出多个样式等待

• @if
• @for
• @each
• @while

混合指令

混合指令类似于C语言中宏，在混合指令中定义一些可重复使用的样式，然后在其他的规则中包含这些样式，注意这个和@extend指令是不同的，混合指令类似与一个函数，它也可以有参数，定义这个函数使用@mixin，调用这个函数使用@include。@content类似与回调函数的作用，可以把一段特殊样式导入到混合样式中

函数指令

函数指令用于自定义函数