如何为 SASS mixin 创建可选参数?
要为 SASS @mixin 创建可选参数,必须传递声明的 mixin 并且应该包含它。
下面的方法会解释清楚。
句法:
@mixin function-name($var1, $x:val){
/* stylesheet properties */
}
@include function-name(value, 0);
方法:在 @mixin 中分配 Null 包括
- 我们可以通过定义参数不由@include 传递的默认值来使 mixin 的参数成为可选参数。
- 传递 null 或 0 或不传递由 mixin 的 @include 传递的参数会导致可选参数。
- 可选参数具有变量名,后跟冒号,a 和 SassScript 表达式
示例 1:下面的示例说明了上述方法。
SASS 文件:style.scss
/* Here $x:5px Optional Arguments*/
@mixin shadowbox($hoff, $voff, $blur, $spread, $color, $x:5px){
-webkit-box-shadow: $hoff $voff $blur $spread $color;
-moz-box-shadow: $hoff $voff $blur $spread $color;
box-shadow: $hoff $voff $blur $spread $color;
border: $x solid $color;
/* null is passed in mixin @include*/
div{
@include shadowbox(0, 8px, 6px, -6px, black, null);
display: block;
}
编译后的 CSS 文件:style.css
div{
-webkit-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
border: 5px solid black;
display: block;
}
示例 2:下面的示例说明了上述方法。
SASS 文件:style.scss
/* Here $attach:fixed Optional Arguments*/
@mixin backgroundstretch( $bgsize, $attach:fixed ){
background-attachment: $attach;
background-position: center;
-webkit-background-size: $bgsize;
-moz-background-size: $bgsize;
-o-background-size: $bgsize;
background-size: $bgsize;
}
body {
color:$grey;
font-family: Helvetica, sans-serif;
background-image: url('/img/backimg.jpg');
background-repeat: no-repeat;
/* 0 is passed in mixin @include*/
@include backgroundstretch(cover, 0);
}
编译后的 CSS 文件:style.css
body {
color: #919191;
font-family: Helvetica, sans-serif;
background-image: url("/img/backimg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
参考: https://sass-lang.com/documentation/at-rules/mixin#optional-arguments