SCSS mixin 中 if/else 条件的语法答案

【问题标题】：Syntax for if/else condition in SCSS mixinSCSS mixin 中 if/else 条件的语法
【发布时间】：2011-07-24 07:26:30
【问题描述】：

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

我希望 mixin 是基于我是否通过 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)

如果能提供最佳或正确方法的帮助，我将不胜感激！

【问题讨论】：

标签： conditional mixins sass if-statement

【解决方案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。

【讨论】：

确实如此，谢谢我使用" "，但我更喜欢自动值:) - 虽然我将它放在mixin语法中作为默认值@但不需要设置变量987654323@谢谢:)
给$width:auto有什么目的吗？作为默认值？

【解决方案2】：

您可以在首次创建 mixin 时内联分配默认参数值：

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

【讨论】：

【解决方案3】：

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

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

【讨论】：