SCSS - адаптивность через медиа-запросы

Question

У меня есть простая вёрстка а-ля калькулятор. Для него надо обеспечить адаптивность. Это логично делать с помощью медиа-запросов.

Мой подход: имеется файл _config.scss, в котором содержатся все глобальные переменные вроде цветов кнопок, шрифтов и их размеров. Потом, в остальных файлах, я подключаю @use 'config' и устанавливаю все нужные стили из него, например: background-color: config.$keyboard_color

Вроде всё красиво, но, когда я пытаюсь изменять эти переменные из медиа-запросов, получается ерунда: он применяет все изменения переменных, вне зависимости от того, выполняется этот запрос или нет.

Пример ниже, где размер шрифта становится 15em, при том, что у меня как бы не embossed-устройство:

$button_color: #5F6062;
$button_color_darker: #3F4143;
$button_color_orange: #FD9E2B;
$button_font_size: 5em;
$button_font_color: white;
$button_font: "sans-serif";

$display_color: #2B2D2F;
$display_font_size: 6em;
$display_padding: 15px 30px;
$display_font_color: white;
$display_font: "sans-serif";

@media (max-width: 700px) {
    $button_font_size: 2em !global; 
}
 
@media (embossed) {
    $button_font_size: 15em !global; 
}

Я понимаю, что от препроцессора этого следовало ожидать (хотя поведение действительно неочевидное), но, в таком случае, какие есть альтернативы? Мне эта идея с конфигурационным файлом кажется очень стройной, логичной и масштабируемой, а альтернатив я особо и не вижу...

Answer 1

Компилятор препроцессора не создаёт в файле css эти переменные. Поэтому поэтому код не работает, создайте новые и используйте их в медиазапросах, или используйте нативные, не забывая посматривать в caniuse https://caniuse.com/#search=css%20variables

:root {
  --font-size: 50px;
}

@media (max-width: 700px) {
  :root {
    --font-size: 20px;
  }
}
h1 {
  font-size: var(--font-size);
}

<h1>Title</h1>

Answer 2

можно так :)

P.S. Если используете CSS Custom Properties, то лучше захватить библиотеку, cssVars называется, вроде как, она включает в себя поддержку IE

@mixin color() {
  @media screen and (min-width: 300px) {
    color: green;
  }
  
  @media screen and (min-width: 600px) {
    color: red;
  }
}

p { @include color; }

<p>Hello, world!</p>

БЛОГ НА HUSL

SCSS - адаптивность через медиа-запросы

Ответы (2 шт):