SCSS Mixin 中 if/else 条件的语法

嗨，我试图学习 SASS/SCSS 和我试图重构我自己的 clearfix 混音

我想要的是混合基于我是否传递混合的宽度。

到目前为止的想法(伪代码只是因为我将包含其他混合)

@mixin clearfix($width) {


@if !$width {


// if width is not passed, or empty do this


} @else {


display: inline-block;
width: $width;
}
}

我是这么想的，但没用。

@include clearfix();

或者

@include clearfix(100%)

@include clearfix(960px)

如果你能给我最好的或者正确的帮助，我将不胜感激！

175660 次浏览

小开

最佳答案

你可以试试这个:

$width:auto;
@mixin clearfix($width) {


@if $width == 'auto' {


// if width is not passed, or empty do this


} @else {
display: inline-block;
width: $width;
}
}

我不确定您的预期结果，但是设置默认值应该返回 false。

小开

您可以在第一次创建 Mixin 时内联地分配默认参数值:

@mixin clearfix($width: 'auto') {


@if $width == 'auto' {


// if width is not passed, or empty do this


} @else {


display: inline-block;
width: $width;


}
}

小开

可以将参数默认设置为 null或 false。
这样，测试一个值是否作为参数传递将会更短。

@mixin clearfix($width: null) {


@if not ($width) {


// if width is not passed, or empty do this


} @else {


display: inline-block;
width: $width;


}
}