SCSS mixin中if / else条件的语法

您好我正在学习SASS / SCSS，并试图重构我自己的mixin的clearfix

我想要的是mixin是基于我是否通过混合宽度。

到目前为止的想法（伪代码，因为我将包括其他mixins）

@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)

我会很感激任何帮助最好的或正确的方式来做到这一点！

Answer 1

你可以试试这个：

 $width:auto; @mixin clearfix($width) { @if $width == 'auto' { // if width is not passed, or empty do this } @else { display: inline-block; width: $width; } } 

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

Answer 2

您可以在首次创build混合时内联缺省参数值：

 @mixin clearfix($width: 'auto') { @if $width == 'auto' { // if width is not passed, or empty do this } @else { display: inline-block; width: $width; } }