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)

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

你可以试试这个:

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

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

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

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