变量
$开头命名变量
$blue:#ff0000;
定义map变量
map变量相当于对象
$colors:(
primary:blue;
success:red;
)
map-get
获取map变量某个key的值
.text-blue{
color:map-get($colors,'primary')
}
map-merge
合并map变量
map-merge($colors,$another-colors)
!default
!default表示如果变量赋值过,那么!defaut的赋值就无效。
$white:#fff;
$white:#000 !default;
.color{
color:$white;
}
//转成css
.color{
color:#fff;
}
@mixin
定义一个可以在整个样式表中重复使用的样式,可以接受参数。
@mixin important-text($text-color) {
color: $text-color;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
@include
将混入(mixin)引入到文档中。
$danger-color:red;
.danger {
@include important-text($danger-color);
background-color: green;
}
@extend
扩展某个类的样式
// focus状态下和原来的一样
.el-button:focus{
@extend .el-button
}
循环@each
@colors:(
primary:blue,
success:green
)
@each $key,$value in $colors{
.text-#{$key}{
color:$value
}
}
结果是
.text-primary{color:blue}
.text-success{color:green}