Использование локальных переменных Sass в mixin - PullRequest
Новая
       22

Использование локальных переменных Sass в mixin

0 голосов
/ 10 апреля 2020

У меня есть несколько переменных, которые определены для использования в светлой / темной теме (два отдельных файла): 

$primary-1: red;
$primary-2: green;

, и я не хочу объявлять их все дважды при их использовании. Я написал миксин, который выполняет задания для меня: 

@mixin assign-vars {
  --primary-1: #{$primary-1};
  --primary-2: #{$primary-2};
}

, и я хотел бы использовать его так: 

@import 'assign-vars';

:root,
:root[data-theme='light'] {
  @import 'light-theme-variables';
  @include assign-vars;
}

:root[data-theme='dark'] {
  @import 'dark-theme-variables';
  @include assign-vars;
}

, но это не работает, так как я получаю ошибку говоря, что $primary-1 является неопределенной переменной. Как я могу выполнить sh, не выполняя все декларации дважды?

1 Ответ

0 голосов
/ 13 апреля 2020

В итоге я переместил переменные в карту : 

$light-vars: (
  $font-name: 'Some Font',
  $primary-1: red
);

$dark-vars: (
  $font-name: 'Some Other Font',
  $primary-1: green
);

и создал вспомогательный миксин, чтобы назначить их на CSS переменные с тем же именем: 

@mixin assign-map-properties($map) {
  @each $key, $value in $map {
    @if (type-of($value) == 'string') {
      --#{$key}: '#{$value}';
    }
    @else {
      --#{$key}: #{$value};
    }
  }
}

, что позволило мне выполнить sh то, что мне нужно: 

@import 'assign-map-properties';

:root,
:root[data-theme='light'] {
  @import 'light-vars';
  @include assign-map-properties($light-vars);
}

:root[data-theme='dark'] {
  @import 'dark-vars';
  @include assign-map-properties($dark-vars);
}

Генерировано CSS: 

:root,
:root[data-theme='light'] {
  --font-name: 'Some Font';
  --primary-1: red;
}

:root[data-theme='dark'] {
  --font-name: 'Some Other Font';
  --primary-1: green;
}
...