>[info]整理自 [Sass 中文网](https://www.sass.hk/docs/) [TOC] # 1.嵌套规则（Nestd Rules） Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器 ```css #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; } ``` # 2.父选择器（Referencing Parent Selectors） `&` 代表嵌套规则外层的父选择器，`&` 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器如 `&- ` `&:` `&::`等 # 3.定义变量 变量以美元符号`$`开头，赋值方式与 CSS 属性的写法一样。 变量作用域：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则使用（局部变量），不在嵌套规则内定义的变量则可以在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 `!global` 声明 ```css #main { $width: 5em !global; width: $width; } #sidebar { width: $width; } ``` 编译为 ```css #main { width: 5em; } #sidebar { width: 5em; } ``` # 4.数据类型（Data Types） SassScript 支持 6 种主要的数据类型： 1)数字：`1, 2, 13, 10px` 2)字符串：有引号字符串与无引号字符串，`"foo", 'bar', baz` 3)颜色：`blue, #04a3f9, rgba(255,0,0,0.5)` 4)布尔型：`true, false` 5)空值：`null` 6)数组 (list)，用空格或逗号作分隔符：`1.5em 1em 0 2em, Helvetica, Arial, sans-serif maps` SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 `!important` 声明。然而 Sass 不会特殊对待这些属性值，一律视为无引号字符串。 ## 字符串（String） SassScript 支持 CSS 的两种字符串类型：有引号字符串 (quoted strings)，如` "Lucida Grande"'http://sass-lang.com'；`与无引号字符串 (unquoted strings)，如 `sans-serif bold`，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 `#{}` (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名： ```css @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); ``` 编译为 ```css body.firefox .header:before { content: "Hi, Firefox users!"; } ``` ## 数组（Lists） 数组 (lists) 指 Sass 如何处理 CSS 中`margin: 10px 15px 0 0`或者`font-face: Helvetica, Arial, sans-serif`这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。 - `nth`函数可以直接访问数组中的某一项； - `join`函数可以将多个数组连接在一起； - `append`函数可以在数组中添加新值； - `@each`指令能够遍历数组中的每一项。 数组中可以包含子数组，比如`1px 2px, 5px 6px`是包含`1px 2px`与`5px 6px`两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成`(1px 2px) (5px 6px)`。变化是：之前的`1px 2px, 5px 6px`使用逗号分割了两个子数组 (comma-separated)，而`(1px 2px) (5px 6px)`则使用空格分割(space-separated)。 当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以`(1px 2px) (5px 6px)`与`1px 2px, 5px 6px`在编译后的 CSS 文件中是完全一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。 ## Maps [https://www.cnblogs.com/whqet/p/Sassmap.html](https://www.cnblogs.com/whqet/p/Sassmap.html) # 5.运算（Operations） 所有数据类型均支持相等运算`==`或`!=`，此外，每种数据类型也有其各自支持的运算方式。 ## 数字运算 SassScript 支持数字的加减乘除、取整等运算 (`+, -, *, /, %`)，如果必要会在不同单位间转换值。 ```css p { width: 1in + 8pt; } ``` 编译为 ```css p { width: 1.111in; } ``` 以下三种情况/将被视为除法运算符号： * 如果值，或值的一部分，是变量或者函数的返回值 * 如果值被圆括号包裹 * 如果值是算数表达式的一部分 ``` 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; } ``` ## 颜色值运算 ## 字符串运算 ## 布尔运算 ## 圆括号 # 6.函数（Functions） Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用： ```css $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } ``` 编译为 ```css #sidebar { width: 240px; } ``` 与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。 自定义的函数也可以使用关键词参数，上面的例子还可以这样写： `#sidebar { width: grid-width($n: 5); }` 建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。 # 7.插值语句（Interpolation:#{}） # 8.@-Rules ## @import Sass 拓展了`@import`的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。 通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。 * 文件拓展名是 `.css` * 文件名以 `http://` 开头 * 文件名是 `url()` * `@import` 包含 `media queries` 如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。 ## @extend 在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写： ```css .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } ``` 上面代码的意思是将`.error`下的所有样式继承给`.seriousError`，`border-width: 3px;`是单独给`.seriousError`设定特殊样式，这样，使用`.seriousError`的地方可以不再使用`.error`。 其他使用到`.error`的样式也会同样继承给`.seriousError`，例如，另一个样式`.error.intrusion`使用了`hacked.png`做背景，`<div class="seriousError intrusion">`也同样会使用`hacked.png`背景。 ## @mixin 与 @include 使用`@include`指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）： ```css .page-title { @include large-text; padding: 4px; margin-top: 10px; } ``` 编译为 ```css .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; } ``` 也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。 混合样式中也可以包含其他混合样式 混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置 # 9.参数（Arguments）