共计 683 个字符，预计需要花费 2 分钟才能阅读完成。
变量 $
$width: 5em;
#main {
width: $width;
}
嵌套引用
嵌套引用在其他编程语言中即是字符串插值，需要用 #{} 进行包裹：
$left: left;
.div {
border-#{$left}-width: 5px;
}
继承 @extend
.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
Mixin
使用 @mixin 命令，定义一个代码块
使用 @include 命令，调用这个 mixin
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
参数和缺省值
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
高级用法
流程控制
条件语句 @if @else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
循环语句
@for
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
@while $i
$i: 6;
@while $i > 0 {
.item-#{$i} {width: 2em * $i;}
$i: $i – 2;
}
函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
