Sass 罕用性能
原文链接：https://note.noxussj.top/?source=sifo
Sass 性能有很多，这边只列举一些比拟罕用的。
嵌套规定 (Nested Rules)
Sass 容许将一套 CSS 款式嵌套进另一套款式中，内层的款式将它外层的选择器作为父选择器。
编译前
.box { .box1 { background-color: red; } .box2 { background-color: blueviolet; } }编译后
.box .box1 { background-color: red; } .box .box2 { background-color: blueviolet; } .box .box3 { background-color: blue; }父选择器 & (Referencing Parent Selectors: &)
在嵌套 CSS 规定时，有时也须要间接应用嵌套外层的父选择器。
编译前
button { width: 100px; height: 30px; &:hover { background-color: red; } }编译后
button { width: 100px; height: 30px; } button:hover { background-color: red; }属性嵌套 (Nested Properties)
有些 CSS 属性遵循雷同的命名空间 ( namespace )，比方 font-family , font-size , font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了防止了反复输出，Sass 容许将属性嵌套在命名空间中。
编译前
.my-content { padding: { top: 10px; right: 10px; bottom: 10px; left: 10px; } font: { size: 30px; weight: bold; } }编译后
.my-content { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 30px; font-weight: bold; } 正文
单行正文不会被编译到 css 文件中，多行正文中能够应用差值语句 "``" ，类型 ES6 的模板字符串。
单行正文
单行正文
// These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. .my-content { width: 100%; height: 100%; }编译后
.my-content { width: 100%; height: 100%; }多行正文
编译前
/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ .my-content { width: 100%; height: 100%; }编译后
/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ .my-content { width: 100%; height: 100%; }变量 $
编译前
$width: 100px; $height: 100px; .box { width: $width; height: $height; }编译后
.box { width: 100px; height: 100px; }运算 (Operations)
编译前
.box { width: 100px + 100px; height: 200px / 2; background-color: royalblue; }编译后
.box { width: 200px; height: 100px; background-color: royalblue; }插值语句 #{}
编译前
$name: box; $attr: background; .box { .#{$name}1 { width: 100px; height: 100px; #{$attr}-color: red; } .#{$name}2 { width: 100px; height: 100px; #{$attr}-color: blueviolet; } .#{$name}3 { width: 100px; height: 100px; #{$attr}-color: blue; } }编译后
.box .box1 { width: 100px; height: 100px; background-color: red; } .box .box2 { width: 100px; height: 100px; background-color: blueviolet; } .box .box3 { width: 100px; height: 100px; background-color: blue; }@import
Sass 拓展了 @import 的性能，容许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所蕴含的变量或者混合指令 ( mixin ) 都能够在导入的文件中应用。
编译前（base.scss）
@import './reset.scss';.box { .#{$name}1 { width: 100px; height: 100px; #{$attr}-color: red; } .#{$name}2 { width: 100px; height: 100px; #{$attr}-color: blueviolet; } .#{$name}3 { width: 100px; height: 100px; #{$attr}-color: blue; }}编译前（reset.scss）
* { margin: 0; padding: 0; } $name: box; $attr: background;编译后（base.css）
* { margin: 0; padding: 0; } .box .box1 { width: 100px; height: 100px; background-color: red; } .box .box2 { width: 100px; height: 100px; background-color: blueviolet; } .box .box3 { width: 100px; height: 100px; background-color: blue; } 嵌套 @import
编译前（base.scss）
.box { @import 'box'; }编译前（box.scss）
.box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 100px; height: 100px; background-color: blue; } .box3 { width: 100px; height: 100px; background-color: blueviolet; }编译后（base.css）
.box .box1 { width: 100px; height: 100px; background-color: red; } .box .box2 { width: 100px; height: 100px; background-color: red; } .box .box3 { width: 100px; height: 100px; background-color: red; }@extend
编译前
.box { width: 100px; height: 100px; } .box { .box1 { @extend .box; background-color: red; } .box2 { @extend .box; background-color: blueviolet; } .box3 { @extend .box; background-color: blue; } }编译后
.box, .box .box1, .box .box2, .box .box3 { width: 100px; height: 100px; } .box .box1 { background-color: red; } .box .box2 { background-color: blueviolet; } .box .box3 { background-color: blue; }@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输入 {} 内的代码。
编译前
$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }编译后
p { color: green; }@for
@for 指令能够在限度的范畴内反复输入格局，每次按要求（变量的值）对输入后果做出变动。这个指令蕴含两种格局：@for $var from "start" through "end"，或者 @for $var from "start" to "end" 。
区别在于 through 与 to 的含意：当应用 through 时，条件范畴蕴含 "start" 与 "end" 的值，而应用 to 时条件范畴只蕴含 "start" 的值不蕴含 "end" 的值。另外， $var 能够是任何变量，比方 $i ； "start" 和 "end" 必须是整数值。
编译前
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }编译后
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }@each
@each 指令的格局是 $var in "list", $var 能够是任何变量名，比方 $length 或者 $name，而 "list" 是一连串的值，也就是值列表。@each是一个循环语句，$key、$value、相当于 javascript 中的对象键值对，名字能够自定义。
编译前
@each $key, $value in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$key} { font-size: $value; } }编译后
h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }@while
@while 指令反复输入格局直到表达式返回后果为 false。这样能够实现比 @for 更简单的循环，只是很少会用到。
编译前
$i: 3; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 1; }编译后
.item-3 { width: 6em; } .item-2 { width: 4em; } .item-1 { width: 2em; }混合指令 @mixin & @include
应用 @mixin 指令定义混合款式，应用 @include 指令援用混合款式，格局是在其后增加混合名称，以及须要的参数（可选）。
编译前
@mixin box { width: 100px; height: 100px; } .box { .box1 { @include box; background-color: red; } .box2 { @include box; background-color: blueviolet; } .box3 { @include box; background-color: blue; } }编译后
.box .box1 { width: 100px; height: 100px; background-color: red; } .box .box2 { width: 100px; height: 100px; background-color: blueviolet; } .box .box3 { width: 100px; height: 100px; background-color: blue; }参数 (Arguments)
参数用于给混合指令中的款式设定变量，并且赋值应用。在定义混合指令的时候，依照变量的格局，通过逗号分隔，将参数写进圆括号里。援用指令时，依照参数的程序，再将所赋的值对应写进括号。
编译前
@mixin box($color) { width: 100px; height: 100px; background-color: $color; } .box { .box1 { @include box(red); } .box2 { @include box(blueviolet); } .box3 { @include box(blue); } }编译后
.box .box1 { width: 100px; height: 100px; background-color: red; } .box .box2 { width: 100px; height: 100px; background-color: blueviolet; } .box .box3 { width: 100px; height: 100px; background-color: blue; }函数指令 (Function Directives)
Sass 反对自定义函数，并能在任何属性值或 Sass script 中应用。
编译前
@function box-width($width) { @return $width * 2; } .box { .box1 { width: box-width(100px); height: 100px; background-color: red; } .box2 { width: box-width(100px); height: 100px; background-color: blueviolet; } .box3 { width: box-width(100px); height: 100px; background-color: blue; } }编译后
.box .box1 { width: 200px; height: 100px; background-color: red; } .box .box2 { width: 200px; height: 100px; background-color: blueviolet; } .box .box3 { width: 200px; height: 100px; background-color: blue; }原文链接：https://note.noxussj.top/?source=sifo