支持属性嵌套
.home { font: { family: fantasy; size: 30px; weight: normal; } } // 上述代码相当于css的如下代码 .home { font-family: fantasy; font-size: 30px; font-weight: normal; } SassScript
Sass支持一些类似js的语法，为我们提供了很多强大的功能。
变量
（1）声明变量
$nav-bgc: rgba(0, 0, 0, .2);
（2）引用变量
background: $nav-bgc;
（3）!default
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
$content: “First content”; $content: “Second content?” !default; $new_content: “First time reference” !default; #main { content: $content; // “First content” new-content: $new_content; // “First time reference” }
ps：变量是 null 空值时将视为未被 !default 赋值。如果第一个c o n t e n t 的值是 n u l l ，那么将会取 content的值是null，那么将会取content的值是null，那么将会取content: “Second content?” !default的值。
数据类型
SASS支持的数据类型主要有以下几种：
- 数字，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)
支持运算符
运算规则与js类似，但有一些特别的地方，具体请参考SASS教程。
插值语法#{}
通过 #{} 插值语句可以在选择器或属性名或属性值中使用变量。
使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。比如下面用到的font写法。
$name: foo; $attr: border; $font-size: 12px; $line-height: 30px; p.#{$name} { #{$attr}-color: blue; font: #{KaTeX parse error: Expected 'EOF', got '}' at position 10: font-size}̲/#{line-height}; }
@extend
@extend可以实现继承，适用于一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。在不使用@extend时，我们完全可以定义两个class来实现，如：
// css部分 .error { border: 1px #f00; background-color: #fdd; } .seriousError { border-width: 3px; } // html部分 但是使用@extend能为我们带来更多的好处，简洁易维护。 .seriousError { border-width: 3px; @extend .error; }
控制指令
（1）@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码
p { @if true { border: 1px solid; } }
@if后面可以接@else if和@else语句
（2）@for
这个指令包含两种格式：
@for $var from through
@for $var from to
区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。
（3）@each
// @each 遍历值数组中的每一项，然后输出结果 $var in {} // @each 可遍历多维数组，如下所示 // a n i m a l 接收来自 ( p u m a , b l a c k , d e f a u l t ) 的数据， animal接收来自(puma, black, default)的数据，animal接收来自(puma,black,default)的数据，color接收来自(red, blue, green)的数据，依次类推。 @each animal,animal, color, $cursor in (puma, black, default), (red, blue, green), (pointer, default, move) { .#{$animal}-icon { background-image: url(‘/images/#{$animal}.png’); border: 2px solid $color; cursor: $cursor; }
