SCSS mixin 中 if/else 条件的语法
嗨，我正在尝试学习 SASS/SCSS，并尝试为 clearfix 重构我自己的 mixin
我想要的是混合基于我是否通过混合宽度。
到目前为止的想法（仅伪代码，因为我将包括其他混入）
@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)
对于最好或正确的方法，我将不胜感激！
您可以在首次创建 mixin 时内联分配默认参数值：
@mixin clearfix($width: 'auto') {
@if $width == 'auto' {
// if width is not passed, or empty do this
} @else {
display: inline-block;
width: $width;
}
}
你可以试试这个：
$width:auto;
@mixin clearfix($width) {
@if $width == 'auto' {
// if width is not passed, or empty do this
} @else {
display: inline-block;
width: $width;
}
}
我不确定您的预期结果，但设置默认值应该返回 false。
您可以将参数默认为 null 或 false。
这样，测试值是否已作为参数传递会更短。
@mixin clearfix($width: null) {
@if not ($width) {
// if width is not passed, or empty do this
} @else {
display: inline-block;
width: $width;
}
}
关注公众号
不定期副业成功案例分享
" "，但我更喜欢 auto 值:) - 尽管我将它放在 mixin 语法中作为默认值@mixin clearfix($width: auto) {...，但不需要设置变量谢谢 :)