1. 变量申明及应用
$color: red;.box { color: $color;}2. mixin和include
2.1 简略应用
$bgColor: red;@mixin bg { background: $bgColor;}.box { @include bg;}编译后果：
.box { background: red;}2.2 进阶应用
$namespace: 'zz';@mixin B($name){ $aaa: $namespace + '_' + $name; .#{$aaa} { @content; }}@include B(input) { font-size: 12px;}编译后果：
.zz_input { font-size: 12px;}3. 列表和循环
3.1 for循环
$list: red, green, blue;@for $i from 1 through 3 { .status-#{$i} { color: nth($list, $i) }}@for $i from 1 to 4 { .status-#{$i} { color: nth($list, $i) }}注：nth能够获取数组的某个元素；through和to的编译后果统一，要留神是的to走不到最初一个数：
.status-1 { color: red;}.status-2 { color: green;}.status-3 { color: blue;}3.2 each循环
$list:red,green,blur;@each $item in $list { .#{$item} { color: $item }}编译后果：
.red { color: red;}.green { color: green;}.blur { color: blur;}4. map构造
$colorMap: ( fail: 'red', success: 'green', pendding: 'blue');$bgColorMap: ( fail: 'red', success: 'green', pendding: 'blue');@each $key, $value in $colorMap { .#{$key} { color: $value; border-color: map-get($bgColorMap, $key) }}编译后果：
.fail { color: "red"; border-color: "red";}.success { color: "green"; border-color: "green";}.pendding { color: "blue"; border-color: "blue";}5. 函数
@function vw($n) { @return calc($n*100vw/750)};@function px($n) { @return calc(#{var(--rootWidth)} * #{$n} / 1920);}@function vh($n) { @return calc($n * 100vh / 1080);}body { font-size: vw(10)}