可选参数
SASS 的可选参数只允许你在指定其值时使用参数; 否则,它将被忽略。我们举一个以下 mixin 的例子:
@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
width: $img-width;
height: $img-height;
outline: 1px solid lightgray;
outline-offset: 5px;
}
所以调用
.default {
@include galerie-thumbnail;
}
.with-width {
@include galerie-thumbnail($img-width: 12em);
}
.without-height {
@include galerie-thumbnail($img-height: null);
}
将只在 CSS 文件中输出以下内容:
.default {
height: 14em;
outline: 1px solid lightgray;
outline-offset: 5px;
}
.with-width {
width: 12em;
height: 14em;
outline: 1px solid lightgray;
outline-offset: 5px;
}
.without-height {
outline: 1px solid lightgray;
outline-offset: 5px;
}
SASS 不输出 null
作为其值的属性,这在我们需要在调用中包含可选参数时非常有用。