Как передать HTML-атрибут data-`string в миксин SCSS через attr ()? - PullRequest
Новая
       28

Как передать HTML-атрибут data-`string в миксин SCSS через attr ()?

3 голосов
/ 11 апреля 2019

Я пытаюсь настроить цветовую схему в SCSS, где у меня может быть следующий HTML: 

<div class="swatch" data-bg="green">...</div>

У меня есть смешение SCSS, определенное так: 

@function color($key: 'black') {
  @return map-get($colors, $key);
}

Итак, если я передам его background-color: color('green'), он посмотрит на карту $colors: ( ... ), увидит 'green': #009900, и вернет background-color: #009900; в качестве CSS.

Проблема возникает, когда я пытаюсь передать значение атрибута data-bg в миксин color() SCSS, например: 

.swatch[data-bg] {
  background-color: color(attr(data-bg));
}

Это не работает. Я бы ожидал , чтобы он анализировал значение как таковое:

color(attr(data-bg)) → color('green') → #009900

Однако SCSS даже не будет отображать эту background-color строку в CSS.

У меня есть Codepen, где вы можете увидеть, что я пытаюсь сделать. Здесь образец цвета "Браун": https://codepen.io/rbrum/pen/axZLxw

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 29 апреля 2019

Для всех, кто сталкивается с этим вопросом, вот как я в итоге решил свою проблему.

Вместо того, чтобы полагаться на атрибуты data-, я просто использовал имена классов.Например, всякий раз, когда мне нужен элемент с определенным цветом фона, я использую имя класса, например .bg-amber или .bg-purple.Мои цвета определены так: 

$colors: (
  'black': #000000,
  'white': #FFFFFF,
  // ...
  'amber': #FFBF00,
  'purple': #800080,
  // ...
);

Чтобы облегчить доступ к цвету, я определил функцию, которая вызывает любой цвет по имени: 

@function c($key: 'black') {
  @return map-get($colors, $key);
}

Затем я определяюmixin, который, учитывая название цвета, будет применять его в качестве цвета фона.Я также могу передать ему префикс, который используется в атрибуте CSS. 

@mixin bg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    background-color: c($color-name);
  }
}

Если бы я хотел использовать его в одноразовой ситуации, я бы использовал его так: 

@include bg('amber', 'bg-');

... что приведет к следующему: 

.bg-amber {
  background-color: #FFBF00;
}

Наконец, я использую цикл @each, чтобы сделать это для всех моих цветов: 

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
}

Я также могу определить версию «переднего плана»: 

@mixin fg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    color: c($color-name);
  }
}

И затем я могу использовать ее в цикле @each прямо под bg() использованием: 

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
  @include fg($color-name, 'txt-');
}

Этотакже может быть расширен для таких вещей, как цвета рамок, тени ящиков и т. д.

...