Используйте значение переменной в @each - PullRequest
Новая
       3

Используйте значение переменной в @each

0 голосов
/ 05 июля 2018

Я хочу использовать значение переменной в @each: для создания классов для разных состояний. Но SASS не использует значение, оно помещается в имя переменной.

Синтаксис SASS: 

$success: green;
$warning: yellow;
$danger: red;
$information: steelblue;

@mixin theme ($color) {
  &:checked {
    background: $color;
  }

@each $theme in success, warning, danger, information {
  .checkbox--#{$theme} {    
    @include theme($theme);
  }
}

Вместо использования значения $ warning, mixin создаст 

color: warning

Как я могу это исправить?

1 Ответ

0 голосов
/ 05 июля 2018

В SCSS нет имен динамических переменных, но вместо этого можно использовать Map : 

$success: green;
$warning: yellow;
$danger: red;
$information: steelblue;

@mixin theme ($color) {
    &:checked {
        background: $color;
    }
}

$themes: (
    success $success,
    warning $warning,
    danger $danger,
    information $information
);

@each $theme, $color in $themes {
    .checkbox-#{$theme} {
        @include theme($color);
    }
}

Для полноты картины, если вы используете действительно старую версию SCSS, которая их не поддерживает, вы можете использовать вложенные списки и nth функция. 

...

$themes: (
    (success $success),
    (warning $warning),
    (danger $danger),
    (information $information)
);

@each $pair in $themes {
    $theme: nth($pair, 1);
    $color: nth($pair, 2);

    .checkbox-#{$theme} {
        @include theme($color);
    }
}

Оба будут выдавать одинаковый вывод: 

.checkbox-success:checked {
    background: green;
}

.checkbox-warning:checked {
    background: yellow;
}

.checkbox-danger:checked {
    background: red;
}

.checkbox-information:checked {
    background: steelblue;
}
...