Экспорт переменных SCSS в JS (переменные автоматического цикла)
UPDATE: If you plan to implement the
exportsolution, you must place it in a separate file to prevent redundant exports in your compiled CSS code. See here.
Недавно я узнал, что вы можете экспортировать стили из 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?
@MaximoMussini - он известен как ICSS (Interoperable CSS), проверьте эту ссылку: glenmaddern.com/articles/interoperable-css. В Интернете также есть различные другие статьи, просто добавьте совместимый CSS в Google :-D
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Взяв 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 Документы
Я думал об этом, но мне не очень нравится использовать карту для ссылки на все мои цвета. Я приму это как ответ, хотя собирался опубликовать то же самое, потому что я вполне уверен, что это единственный способ добиться этого...
Спасибо @BenCarey - с тех пор я отредактировал свой ответ, включив в него цикл, но, к сожалению, он все еще зависит от карты. Да я и не умею по-другому :(
Вы можете попробовать использовать пример 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/documentation/values/maps
Некоторые улучшения принятого ответа:
Используйте верблюжий чехол, чтобы вы могли индивидуально экспортировать переменную.
Установите директиву
@eachснаружи, чтобы она не создавала новое:exportправило at для каждой переменной.
_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
Side note: I prefer using quotes inside Sass Maps, but you can omit them.
Это было действительно полезно. Единственный ответ, который работает!
Не знаю почему, но почему-то это больше не работает :( codeandbox.io/s/cool-night-92rij
Нужно написать: @each $key, $value in $theme-colors { #{$key}: #{$value}; } т.е. должны интерполировать переменные
Какая настройка загрузчика требуется для использования
:export? Я изо всех сил пытаюсь найти любую документацию в Интернете.