У меня есть модуль S CSS с большим количеством переопределяемых !default переменных, и я пытаюсь использовать его в проекте, используя новое правило @use вместо устаревшего @import. Раньше было довольно просто переопределить большое количество переменных. Пока я импортировал свои переменные перед импортом модуля, они будут иметь приоритет над значениями !default.
Теперь, если я попытаюсь @use модуль в глобальном пространстве имен, например:
$h1-font-size: 40px;
@use 'my-module' as *;
, я получаю сообщение об ошибке - SassError: This module and the new module both define a variable named "$h1-font-size".
По-видимому, правильный способ сделать это - использовать ключевое слово with, например,
@use 'my-module' with (
$h1-font-size: 40px
);
Но теперь моя переменная $h1-font-size недоступна для других частей моего кода. Это единственная возможность переопределения значения в модуле. Если бы я попытался назначить его чему-то другому, я бы получил ошибку неопределенной переменной.
Так что мне остается делать это
$h1-font-size: 40px;
@use 'my-module' with (
$h1-font-size: $h1-font-size
);
.foo {
font-size: $h1-font-size;
}
Это именно тот эффект, который я хочу - переменная, которая отменяет мой модуль и по-прежнему доступна для использования в других местах. Однако этот синтаксис громоздок для передачи большого количества переопределений. Если я хочу передать, скажем, 30 переопределений, мне нужно 30 определений переменных, а затем 30 строк в блоке with для явной передачи 30 значений.
Обновить / изменить
Ответ от @Miriam Suzanne ниже показывает, что я слишком упростил свой вариант использования, чтобы задать вопрос.
В нашем магазине есть набор миксинов и базовые стили, которые мы используем во многих проектах, и я пытался превратить их в многоразовый модуль, чтобы уменьшить количество копий / вставок. Что-то вроде Bootstrap с множеством переопределяемых значений !default. Большая часть работы находится в стадии разработки, но сам модуль можно увидеть здесь: Derekstrap .
Этот модуль разрабатывается вместе с первым проектом, в котором мы его фактически используем. Все значения !default находятся в модуле, и я хотел бы переопределить их в своем проекте.
Прямо сейчас у меня есть код в моем main.scss (основная точка входа для таблиц стилей), который выглядит следующим образом .
$base-font-family: 'Raleway', Tacoma, sans-serif;
$base-line-height: 1.8;
@use '~@evanshunt/derekstrap/index' with (
$base-font-family: $base-font-family,
$base-line-height: $base-line-height
);
Мне нравится структурировать мои файлы s css довольно детально, чтобы в идеале эти переменные фактически находились в другом файле, а также были доступны для других файлов в проекте.
Если я сделаю что-то вроде следующего, где и в моем файле переменных, и в модуле определена переменная $base-font-family, он компилируется, но переменные не отменяют модуль.
@use 'variables' as *;
@use '~@evanshunt/derekstrap/index' as *;
Я подозреваю, что на этом этапе ответ заключается в том, что мне нужно добавить операторы @use и / или @forward в мои файлы переменных, но это немного ломает мой мозг, чтобы выяснить, смогу ли я успешно переопределить различные части модуля в разных частях кода моего проекта. Приведенное выше предложение только одного файла переменных также является некоторым упрощением. Насколько важным будет порядок операторов @use в моем main.scss, если я изменю одно и то же пространство имен для файлов, как @use d?
У меня есть цель явно определить область видимости и передать значения, но мне бы хотелось, sh какое-то сокращение или трюк, чтобы выполнить это без написания такого большого количества дополнительного кода. Как упоминалось в моем билете запроса функции Sass , я надеялся на простое сокращение для передачи одного контекста в другой, например:
@use 'variables' as variables;
@use 'module' with variables;
Это кажется невозможным, и мне интересно, Мне нужно полностью переосмыслить способ структурирования файлов S CSS, чтобы добиться того, чего я хочу. Что я могу здесь сделать?