Используйте аргумент mixin в качестве переменной - PullRequest
Новая
       12

Используйте аргумент mixin в качестве переменной

1 голос
/ 20 сентября 2019

Итак, у меня разные переменные, и я хочу генерировать CSS в зависимости от аргумента (, который также является переменной ), которую я даю.

Я хочу использовать данный аргумент в качестве имени переменной.Например, если в качестве аргумента задано первичное значение, я на самом деле хочу получить значение переменной $ primary-brighter.

Например: 

$primary: #f5f5f5;
$primary-brighter: #fff;

$secondary: #000;
$secondary-brighter: #333;

Mixin: 

@mixin button-style($argument) {

 background: $argument
 color: $argument-brighter
}

Используется: 

.button-primary {
 @include button-style(primary)
}

Что я ожидаю получить: 

.button-primary {
 background: #f5f5f5;
 color: #fff
}

Что я получу: 

Error or
.button-primary {
 background: primary-brighter
}

Нужно ли экранировать аргумент, чтобы использовать его в качестве переменной??Или мой подход совершенно неверный?

1 Ответ

1 голос
/ 20 сентября 2019

Не уверен, что есть более чистый способ, но вы могли бы добиться чего-то подобного с maps .Одним из способов было бы определить ваши классы кнопок как ключи карты, которая содержит другую карту с фактическими цветами, которые будут использоваться: 

$button-colors: (

  "primary": (
    background: #f5f5f5,
    color: #fff
  ),

  "secondary": (
    background: #000,
    color: #333
  )

);

Тогда в вашем миксине ваш $argument будет текстовым значением вместошестнадцатеричное значение, и вы можете получить доступ к карте цветов кнопки: 

@mixin button-style($argument) {

  $color-map: map-get($button-colors, $argument);

  background: map-get($color-map, background);
  color: map-get($color-map, color);

}

Миксин будет израсходован следующим образом: 

.button-primary {
 @include button-style(primary)
}

.button-secondary {
 @include button-style(secondary)
}
...