Доступ к пользовательским свойствам в модулях SASS - PullRequest
Новая
       41

Доступ к пользовательским свойствам в модулях SASS

0 голосов
/ 23 февраля 2020

Итак, допустим, у меня есть модуль SASS _module.scss, который объявляет некоторые css переменные, называемые пользовательскими свойствами. Когда я сейчас загружаю этот модуль в другой SASS-стиль, назовем его main.scss, у меня есть доступ ко всем SASS-переменным, миксинам, а также правилам, но нет пользовательских свойств внутри него? Я что-то упустил?

Файлы примеров: 

//_module.scss
:root {
   --some-variable: red;
}

// main.scss
@use 'module';

div {
   background-color: var(module.--some-variable); // won't work, private property because of leading '-'
   background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}

Я мог бы использовать @import, но это не рекомендуется и не рекомендуется (см. Документация SASS ). Я попытался включить переменные в чистый css файл module.css, который скомпилирован, но не объявлял никаких пользовательских свойств во время выполнения, поскольку он напрямую переводит @use 'module' из моего файла SASS в точно такой же в CSS - какие браузеры не понимают, очевидно. Он должен более или менее копировать содержимое чистого css файла, но это не так. Конечно, я мог бы попробовать написать в своих модулях миксины, которые устанавливают переменные, но это всего лишь обходной путь.

Я что-то упустил? Мне действительно нужно написать миксин, который устанавливает переменные и должен быть загружен? Это делает использование пользовательских свойств внутри модулей довольно громоздким.

РЕДАКТИРОВАТЬ

Забыл упомянуть, что background-color: var(--some-variable) тоже не работает, хотя и должно в соответствии с документация , так как правила должны применяться напрямую, без определения области действия.

1 Ответ

0 голосов
/ 23 февраля 2020

Тьфу. Проблема заключается в том, что мое расширение VS Code использует LibSass, а не Dart Sass. Поэтому @use еще не поддерживается в большинстве сред. Документация должна определенно быть более ясной об этом, особенно когда предупреждает об использовании @import.

Поскольку я знаю, что он работает с @import, проблема решена, хотя я бы хотел, чтобы модульная система также была включена в LibSass.

tl; dr

Не используйте @use, если вы не уверены, что используете Dart Sass!

...