Sass混入(mixin)添加条件：如何避免生成height样式

你可以通过在混入中添加条件判断来实现需求，以下是两种可行方案：

方案1：用null作为不输出height的标记 #

修改混入代码，仅当$height参数不为null时才生成height样式：

@mixin size($width, $height: $width) {
  width: $width;
  @if $height != null {
    height: $height;
  }
}

使用时给第三个元素传入null即可：

#ele3 {
  @include size(80px, null);
}

方案2：兼容现有auto参数的写法 #

如果想保留原代码中传入auto的写法，同时不生成height样式，可调整判断条件：

@mixin size($width, $height: $width) {
  width: $width;
  @if $height != auto {
    height: $height;
  }
}

这样原代码里#ele3 { @include size(80px, auto); }就不会输出height: auto;样式了。

编译后效果 #

修改后最终编译出的CSS如下：

#ele1 {
  width: 80px;
  height: 80px;
}

#ele2 {
  width: 80px;
  height: 180px;
}

#ele3 {
  width: 80px;
  // 无height属性
}

.element{
  background: blue;
  margin: 10px;
  color: #fff;
  float: left;
  padding: 20px;
}

内容的提问来源于stack exchange，提问作者vedankita kumbhar