本节我们来学习带参混合,Sass 中混合可以接受参数,我们可以通过使用 @include
调用混合时给混合传参,来定义混合生成的精确样式。
给混合传参
混合可以用 SassScript
值作为参数,给定的参数被包括在混合中并且作为为变量提供给混合,既然是作为变量,那么定义参数时,参数名前面需要加一个 $
符号。
当我们定义一个带参混合时,混合的参数被作为变量名,写到混合名后面的小括号中,如果带有多个参数则通过逗号将参数分隔。下面我们来看一下如何给一个混合传参。
示例:
例如在混合中定义两个参数 $num
和 $color
,
@mixin my-text($num, $color) {
font-size: $num;
color: $color;
font-weight: bold;
}
.other{
@include my_text(14px, #fdef92);
}
编译成 CSS 代码:
.other {
font-size: 14px;