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

【问题标题】：Syntax for if/else condition in SCSS mixinsSCSS mixins 中 if/else 条件的语法
【发布时间】：2020-05-30 23:48:12
【问题描述】：

我创建了一个 SASS @mixin，其中包含 @if 条件，用于根据元素的 z-index 属性为元素分配样式以创建某种高度。

但是无论我尝试什么都行不通。

我很确定我做的只是稍有错误，会影响到其他一切。

非常感谢您的反馈。提前致谢！

    $background: #121212;
    $surface: #1f1f1f;
    $surface-shade_1: #282828;
    $surface-shade_2: #303030;
    %surface {
      background-color: $surface;
    }

    %surface-shade_1 {
      background-color: $surface-shade_1;
    }

    %surface-shade_2 {
      background-color: $surface-shade_2;
    }

    @mixin elevation($elevationValue) {
      @if $elevationValue>0 {
        @extend %surface;
      }
      @else if $elevationValue>4 or $elevationValue=4 {
        @extend %surface-shade_1;
      }
      @else if $elevationValue>8 or $elevationValue=8 {
        @extend %surface-shade_2;
      }
      z-index: $elevationValue * 50;
    }

    nav {
      @mixin elevation(4);
    }

【问题讨论】：

标签： css if-statement sass mixins

【解决方案1】：

如果你想在 CSS 文件中使用 @mixin，你可以像 @include mixin-name 一样使用，也可以直接使用 $elevationValue >= 4 而不是 $elevationValue>4 or $elevationValue=4，它会变得更简洁。

$background: #121212;
$surface: #1f1f1f;
$surface-shade_1: #282828;
$surface-shade_2: #303030;
%surface {
  background-color: $surface;
}

%surface-shade_1 {
  background-color: $surface-shade_1;
}

%surface-shade_2 {
  background-color: $surface-shade_2;
}

@mixin elevation($elevationValue) {
  @if $elevationValue > 0 {
    @extend %surface;
  }
  @else if $elevationValue >= 4 {
    @extend %surface-shade_1;
  }
  @else if $elevationValue >= 8 {
    @extend %surface-shade_2;
  }
  z-index: $elevationValue * 50;
}

nav {
  @include elevation(4);
}

【讨论】：