Глобальные CSS переменных без @import

Question

Я хочу определить переменную для моих медиа-запросов в моих файлах SASS / CSS.

Общая структура моих файлов sass для данной страницы:

• file.s css
• _variables.s css
• _colors.s css
• _web.s css
• _tablet. s css
• _mobile.s css

file.s css не имеет ничего, кроме операторов @use (@use вместо @import, потому что команда SASS уходит от @ import ), _variables / _colors имеют мои CSS переменные для свойств и цветов элемента (соответственно) и оставшиеся 3 файла (я буду называть их в общем как _layout. s css) имеют макеты и другие функции для каждого размера экрана.

Поскольку у меня есть несколько файлов file.s css, и каждому соответствующему _layout.s css требуется запрос @media с max- ширины, я бы в идеале хотел, чтобы глобальная переменная, которую я мог использовать в файле _global.s css, включала последовательно во все файлы _layout.s css, а не повторно установите одинаковую максимальную ширину вручную в каждом из них.

Я не могу использовать переменную CSS (я не думаю), потому что они должны быть определены внутри селектора, и это плохо импортируется в запрос @media (я пробовал это, включая просто определение переменной в: root безрезультатно).

Локальная переменная sass (в частности, только препроцессор может видеть это, что вроде облома , но я мог бы жить с этим) будет работать, как показано в this CSS Tricks post , но на самом деле это не дает глобального решения, где я мог бы просто использовать значение.

Это все, что я хочу сказать, что мне нужна глобальная переменная sass (т.е. определенная только в одном файле, но используемая в майских файлах), где я затем могу использовать @media (max-width: var (- my-variable)) или @media (max-width: $ my-variable) в моих локальных файлах _layout.s css для последовательного использования тех же значений.

Я попытался создать файл _global.s css с моими объявлениями и @use их в моих файлах _layout.s css, но мой компилятор sass (Dar tv 1.25.0) не распознает это, и хотя я могу сделать это с помощью @import, та же причина, что и выше (@import уходит), заставляет меня сдерживаться, если есть реальное хорошее решение

Пример того, как это структурировано в page.s css:

@use 'web';
@use 'tablet';
@use 'mobile';
//Note only one of the two below is present at once
@use '../App/global'; //doesn't work
@import '../App/global'; //does work

Структура папок моих стилей

• стили

  • AppFolder

     - _colors.scss
     - _global.scss
     - _variables.scss
     - App.scss
    

  • GenericComponentFolder

     - \_colors.scss
     - \_mobile.scss
     - \_tablet.scss
     - \_web.scss
     - file.scss
    

_global.s css выглядит так (напомним, мы используем переменные SASS, поскольку CSS переменные должны быть определены внутри селектора):

$ small-laptop: 1400px;

$ tablet: 1023px;

$ mobile: 765px;

$ small-mobile: 400px;

в _web.s css мы используем такие переменные

@media(max-width: $small-laptop) {
.my-selector {
height: 10%;
} 

Answer 1

При использовании @use вам необходимо включить пространство имен файла перед переменной.

В вашей структуре вы объявляете свои переменные в _global.scss, поэтому любая переменная, полученная из этого файла , вам нужно пространство имен с этим именем файла.

В вашем случае у вас есть _global.scss:

$small-laptop: 1400px;
$tablet: 1023px;
$mobile: 765px;
$small-mobile: 400px;

Итак, когда вы используете его в своем коде, вы делаете это global.$variable:

@media(max-width: global.$small-laptop) {
    .my-selector {
        height: 10%;
   }
}

Это главное преимущество использования @use в будущем. Вы можете иметь очень общие c имена переменных, которые не будут конфликтовать ни с чем другим, потому что вы можете вызывать их из определенных c файлов. Технически у вас может быть 20 переменных с именем $test, но в зависимости от контекста, в котором вы их используете, вы должны вызывать $test из любого объявления / частичного файла, который соответствует контексту.

@import является глобальным, поэтому после объявления переменной она становится глобальной. И если эта переменная будет назначена где-то еще, вы столкнетесь с конфликтами и непреднамеренной перезаписью.