Экспорт переменных из SASS в ванильный CSS?

Представьте, что у меня есть длинный список переменных SASS в разных файлах .scss, например:

$app-color-white: #ffffff;
$app-color-black: #000000;

Каким будет наиболее эффективный способ экспортировать эти переменные в качестве ванильных переменных CSS?

:root {
  --app-color-white: #ffffff;
  --app-color-black: #000000;
}

Может быть, есть SASS-способ или даже какой-нибудь препроцессор?

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

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
3
0
555
2

Ответы 2

Я думаю, что лучший способ сделать это - использовать что-то вроде карты переменных;

Например.

// 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 таким образом становится громоздким, потому что вам нужно использовать функции получения, такие как map-get, и я считаю, что IDE не очень хорошо поддерживают карты SASS. Я не хочу жертвовать для этого опытом разработчика в SASS.

Slava Fomin II 10.08.2018 15:02

Теперь это возможно благодаря модули 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

Другие вопросы по теме