Как использовать переменную SASS $ на нескольких страницах, используя @use?

Question

Я пытаюсь использовать переменную, которая была объявлена ​​в одной части внутри другой части, которая будет загружена в файл main.s css с помощью @use, который затем будет скомпилирован в css .

Вот настройки:

style.s css

@use './global';
@use './header';

_global.s css

$black: #262626;

_header.s css

header {
  color: $black
}

При запуске попробуйте скомпилировать стиль. css, я получаю эту ошибку:

C:\xampp\htdocs\Site\styles>sass style.scss:style.css
Error: Undefined variable.
  ╷
3 │   color: $black;
  │          ^^^^^^
  ╵
  _header.scss 3:10  @use
  style.scss 2:1     root stylesheet

Работает нормально, если я использую @import вместо @use в моем основном стиле.s css, но разработчики Sass советуют не использовать @ import , потому что он собирается в конечном итоге устареть.

Они говорят, что вместо нужно использовать @ use, и у @use есть много преимуществ перед @import, одним из которых является то, что все экземпляры @use могут быть загружены на в то же время. Я думаю, что это и является причиной проблемы, поскольку _global.s css не загружается до страниц, которые используют $ black, определенных в _global.s css, поэтому эти страницы загружаются без определения $ black.

Есть идеи?

Answer 1

Из документации Sass Lang для @use:

Элементы (переменные, функции и миксины), загруженные с помощью @use, видны только в таблице стилей, которая их загружает

Подумайте в духе import в JavaScript, а не в традиционной глобальной области использования синтаксиса Sass @import.

Я думаю, вы можете попытаться сделать что-то вроде следующее:

global.s css

$black: #000;

header.s css

@use "global";

.header {
  color: global.$black;
}

button.s css

@use "global";

.button {
  color: global.$black;
}

index.s css

@use './button';
@use './header';

---

Это может быть немного более многословно / громоздко, чем то, к чему вы традиционно привыкли с Sass, но в долгосрочной перспективе это, безусловно, имеет огромные преимущества - особенно если вы являетесь разработчиком фреймворка или библиотеки или даже используете существующий с вашими собственными изменениями сверху .

Большая проблема с Sass, с которой пришлось столкнуться многим разработчикам (включая меня), это переменные dec на уровне root и, действительно, все функции Sass доступны по всему миру. Хотя иногда это удобно, это также приводит к большому количеству коллизий при интеграции библиотек с внешним автором или работе в крупных компаниях с большим количеством распределенных групп.

Например: если я использую Bootstrap в качестве основа стиля моего сайта, и я загружаю в дополнительную библиотеку, которая определяет свой собственный gradient-bg mixin (также определенный в TWBS), какой mixin является правильным? Порядок загрузки влияет на это, и вы можете не видеть никаких проблем, но вы также можете увидеть огромные расхождения в ожидаемом выводе, который теперь требует от вас углубиться в эти библиотеки, чтобы увидеть, что происходит.

The * Правило 1046 * решает эту проблему, гарантируя, что члены модуля (переменные, функции и миксины) доступны только внутри таблиц стилей, которые их загружают. Это также дает дополнительное преимущество, позволяя вам еще больше упростить имена членов - поскольку они ограничены пространством имен (последний компонент URL модуля), вы можете на go опередить и просто определить $padding или @mixin flex {}.

Организация

В конечном счете, это может помочь вам логически организовать собственный код в структуру, облегчающую поддержание вашего кода в будущем (как для ваших коллег, так и для вас). Нет ничего плохого в том, чтобы быть ясным в том, что делает ваш код, , особенно , поскольку вы хотите, чтобы он был надежным и предсказуемым, когда вы планируете делать обновления в будущем.

Лично я довольно любит структуру, не отличающуюся от:

styles
|-- global
|    |-- functions.scss
|    |-- spacing.scss
|    |-- typography.scss
|    |-- ...etc...
|-- component
|    |-- button.scss
|    |-- header.scss
|    |-- ...etc...

И в такой ситуации ваш код будет выглядеть примерно так:

button.s css

@use "global/spacing.scss";
@use "global/typography.scss";

.button {
  font-size: typography.$standard;
  padding: spacing.$standard;
}

Глобальное пространство имен

Конечно, все сводится к личным предпочтениям, и я понимаю, что некоторые люди могут не быть поклонниками нового пространства имен. Это может быть несколько смягчено или полностью проигнорировано.

С помощью @use

При использовании новой системы модулей Sass вы не можете помещать элементы в глобальное пространство имен при использовании @use. Однако вы можете загрузить модуль без пространства имен, используя синтаксис @use "path/to/file" as *;. Это позволит вам иметь прямой доступ к участникам без использования синтаксиса <namespace>.<member>.

с @import

Если это все еще не соответствует вашим потребностям, вы можете конечно, продолжайте использовать правило @import в обозримом будущем. Команда намеревается поддержать @import до некоторое время около октября 2022 . На этом этапе вы всегда можете прикрепить вашу версию Sass к последней версии, которая поддерживает @import.