#sass #dart-sass
#нахальство #дарт-сасс
Вопрос:
Я в основном делаю «тему» над существующими scss, изменяя некоторые определения переменных. Мне нужно, чтобы отдельные пакеты css отображались с разными переменными. Я подумал о том, чтобы иметь отдельные основные файлы, которые импортируют общие файлы, чтобы сохранить их СУХИМИ.
Структура файла
- variables_1.scss - variables_2.scss - main_1.scss - main_2.scss - _main-shared.scss _main-shared.scss содержит @import инструкции для всех других файлов scss, но не импортирует переменные.
Содержимое основного файла:
//main_1.scss @use 'variables_1' as *; @import "main-shared"; //main_2.scss @use 'variables_2' as *; @import "main-shared"; Но многоуровневый импорт, похоже, не работает, что приводит к ошибке: Неопределенная переменная в файле _main-shared.scss.
Есть ли лучший способ сделать это? Я не могу импортировать переменные в _main-shared.scss, так как это помешало бы созданию отдельных файлов переменных.
Есть ли для этого решение, о котором я не знаю, или лучшее решение?
Комментарии:
1. Почему вы пишете
@use 'variables_2' as *;вместо@import "variables_2";этого ?2. Мне также интересно, почему вы используете оба
@importи@use?3. @Martin — @use создает пространство имен, поэтому на любую переменную нужно ссылаться как
variables.$foo, а не просто$foo.as *импортирует переменные в глобальное пространство имен. Это противоречит цели @use в смысле пространства имен, но, поскольку существует множество мест, где используются переменные, их редактирование было бы слишком хлопотным. @Arkellys — Наследие. Проект использовал node-sass, и мы перешли на dart-sass. Раньше @use не использовался, но поскольку теперь он предпочтительнее @import, мы переходим на вызовы @use. Но, по-видимому, это не прямое преобразование, так как прямая замена приводит к ошибкам