SASS

CSS 功能拓展

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

p {
  color: #00ff00;
  .redbox {
    color: #000000;
  }
}
 
p {
  color: #00ff00;
}
p .redbox {
  color: #000000;
}

父选择器 &

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

属性嵌套

有些 CSS 属性遵循相同的命名空间，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。命名空间也可以包含自己的属性值

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

占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。当它们单独使用时，不会被编译到 CSS 文件中，必须通过延伸指令 @extend 调用

注释 /* */ 与 //

Sass 中有单行注释 // 和多行注释 /* */ 两种，和 JavaScript 的注释方式一样，但是编译之后单行注释不会保留，多行注释在压缩编译的时候，也不会被保留。我们可以对多行注释使用强制注释 /*! */ ，表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。插值语句 #{} 也可写进多行注释中输出变量值

$version: '1.2.3';
/* This CSS is generated by My Snazzy Framework version #{$version}. */
 
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

SassScript

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。通过 #{}，SassScript 甚至可以生成选择器或属性名，这一点对编写 @mixin 有很大帮助

变量 $

SassScript 最普遍的用法就是变量，变量以美元符号 $ 开头，赋值方法与 CSS 属性的写法一样。变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}
 
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

数据类型

SassScript 支持 6 种主要的数据类型：

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps， 相当于 JavaScript 的 object，(key1: value1, key2: value2)

运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值

函数

SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用。Sass 函数允许使用关键词参数 ，关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名。

Sass 支持自定义函数。与 @mixin相同，也可以传递若干个变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
 
p.foo {
  border-color: blue;
}

@-Rules 与指令

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 @mixin 都可以在导入的文件中使用。允许同时导入多个文件。导入文件也可以使用 #{} 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式

@import 'rounded-corners', 'text-shadow';
 
$family: unquote('Droid+Sans');
@import url('http://fonts.googleapis.com/css?family=\#{$family}');
 
@import url('http://fonts.googleapis.com/css?family=Droid+Sans');

@extend

@extend 的作用是将重复使用的样式延伸给需要包含这个样式的特殊样式

控制指令

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

@for

这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end> > through：[start, end] > to：[start, end) start 和 end 必须是整数值

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，而 <list> 是一连串的值，也就是数组列表

@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到

混合指令

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式

定义混合指令 @mixin

混合指令的用法是在 @mixin 后添加名称与样式，混合也可以包含选择器和属性，甚至可以用 & 引用父选择器

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引用混合样式 @include

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）

参数

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值

有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理