首页 文章

SCSS mixin中if / else条件的语法

提问于
浏览 次
99

嗨，我正在尝试学习SASS / SCSS，并试图重构我自己的mixin for clearfix

我想要的是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

3 回答

  • 205

    首次创建mixin时，可以内联指定默认参数值：

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
    回复于
  • 2

    您可以将参数默认为 null 或 false .
    这样，测试值是否已作为参数传递会更短 .

    @mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
    回复于
  • 132

    你可以试试这个：

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

   @if $width == 'auto' {

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

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

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

    回复于

相关问题