SCSS mixins中if / else条件的语法

问题描述 投票:0回答:1

我创建了一个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个回答
0
投票

如果要在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);
}
© www.soinside.com 2019 - 2024. All rights reserved.