Синтаксис условия if / else в миксинах S CSS - PullRequest
Новая
       21

Синтаксис условия if / else в миксинах S CSS

1 голос
/ 15 февраля 2020

Я создал 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);
}

1 Ответ

2 голосов
/ 15 февраля 2020

Если вы хотите использовать @ mixin внутри CSS файлов, которые вы можете использовать как @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);
}
...