一、混合(Mixin)
1.理解:包含多个样式的‘变量’,定义的混合若不使用,就不会解析到css样式中;使用过后,解析时,相当于将定义的样式复制到使用的位置。
优点:可以传参。
缺点:因为解析时是复制代码,解析后会有大量代码。
2、定义 @mixin
在 sass 中使用 @mixin 标识符来定义混合器,相当于给一段代码赋予了一个名字,然后就可以在其他地方通过引用来复用这段代码。
@mixin 可以被缩写为 =
3.引用 @include
当我们定义好混合器之后,我们就可以通过 @include 标识符来引用混合器。在哪个地方进行引用,混合器的代码就会插入到哪个地方。
@include 可以缩写为 +
4、混合器传参
sass在定义混合器时,可以提前定义好形参,然后在引用时,传递参数,生成特定样式,跟JS的函数时分类似,实参会按照顺序一一传递给形参。
@mixin hunhe {
color: red;
font-size: 20px;
font-family: 楷体;
text-decoration: none;
}
a {
@include hunhe;
background-color: green;
border-radius: 10px;
}
@mixin btn {
width: 100px;
height: 40px;
border-radius: 10px;