Представьте, что у меня есть длинный список переменных SASS в разных файлах .scss
, например:
$app-color-white: #ffffff;
$app-color-black: #000000;
Каким будет наиболее эффективный способ экспортировать эти переменные в качестве ванильных переменных CSS?
:root {
--app-color-white: #ffffff;
--app-color-black: #000000;
}
Может быть, есть SASS-способ или даже какой-нибудь препроцессор?
Я хочу, чтобы мой фреймворк SASS также использовался в ванильных проектах CSS.
Я думаю, что лучший способ сделать это - использовать что-то вроде карты переменных;
Например.
// sass variable map
$colors: (
primary: #FFBB00,
secondary: #0969A2
);
// ripped CSS4 vars out of color map
:root {
// each item in color map
@each $name, $color in $colors {
--color-#{$name}: $color;
}
}
Выход:
:root {
--color-primary: #FFBB00;
--color-secondary: #0969A2;
}
Источник: https://codepen.io/jakealbaugh/post/css4-variables-and-sass
Теперь это возможно благодаря модули sass и новой функции sass:meta.module-variables()
: it
Returns all the variables defined in a module, as a map from variable names (without $) to the values of those variables.
Например
// _vars.scss
$color: red;
$font: Helvetica, sans-serif;
// style.scss
@use 'sass:meta';
@use 'vars';
:root {
@each $name, $value in meta.module-variables(vars) {
--#{$name}: #{$value};
}
}
Выходы
:root {
--color: red;
--font: Helvetica, sans-serif;
}
⚠️ Sass modules are currently only supported in Dart Sass
Спасибо! Я думал о таком подходе, но использование переменных в SASS таким образом становится громоздким, потому что вам нужно использовать функции получения, такие как
map-get
, и я считаю, что IDE не очень хорошо поддерживают карты SASS. Я не хочу жертвовать для этого опытом разработчика в SASS.