Экспорт переменных SCSS в JS (автоматическое зацикливание переменных)

Question

Недавно я узнал, что вы можете экспортировать стили из SCSS в JS следующим образом:

_variables.scss

:export {
    some-variable: 'some-value';
}

app.js

import styles from 'core-styles/brand/_variables.scss';

Исходя из этого, мой _variables.scss отформатирован следующим образом:

/* Define all colours */
$some-color:       #000;
$another-color:    #000;

// Export the color palette to make it accessible to JS
:export {
    some-color: $some-color;
    another-color: $another-color;
}

Проблема с указанным выше форматом заключается в том, что мне нужно переопределить каждую из моих переменныхв пределах export.Поэтому мне интересно узнать, есть ли способ loop, хотя каждая из моих переменных автоматически и экспортировать их в JS?

Answer 1

Взяв Cue из Bootstrap 4, вы можете объединить карту SASS с циклом, как показано ниже;

/* Define all colours */
$theme-colours: (
  some-color: #000,
  another-color: #000,
  third-color: #000,
  fourth-color: #000
)

@each $color, $value in $theme-colours {
  :export{
    $color: $value;
  }
}

Вот несколько примеров из Bootstrap 4 Docs

Answer 2

Некоторые улучшения в принятом ответе:

• Использование camelcase , чтобы вы могли по отдельности экспортировать переменную.

• Установите директиву @each снаружи, чтобы она не генерировала новое :export правило для каждой переменной.

---

_variables.scss

$theme-colors: (
  'someColor': #000,
  'anotherColor': #FFF,
);

:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

app.js

import styles from './core-styles/brand/_variables.scss' // { anotherColor: "#FFF", someColor: "#000" }
import { someColor } from './core-styles/brand/_variables.scss' // #000

Примечание: Я предпочитаю использовать кавычки в Sass Maps, ноВы можете опустить их.

Answer 3

Вы можете попробовать использовать SCSS map пример здесь

$defalutColor:#000; // your default color
$colors: ( headingColor: #6446ff, preragraphColor: #1b1b1b, linkColor: #1dc506); //decleared color function
@function color($value:$defalutColor) {
    @if map-has-key($colors, $value) {
        @return map-get($colors, $value);
    }
    @return $defalutColor; //when not decleared color then the return default color
}

Используйте приведенную ниже команду для использования функции цвета здесь

element {
    color: color(linkColor); //call the function for set color
//Or
    color: color(); // when blank call then the give function default color it's predefined
}

Вы можете узнать о SCSS Maps здесь: https://sass -lang.com / документация / значения / карты