У меня есть простая вёрстка а-ля калькулятор. Для него надо обеспечить адаптивность. Это логично делать с помощью медиа-запросов.
Мой подход: имеется файл _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;
}
Я понимаю, что от препроцессора этого следовало ожидать (хотя поведение действительно неочевидное), но, в таком случае, какие есть альтернативы? Мне эта идея с конфигурационным файлом кажется очень стройной, логичной и масштабируемой, а альтернатив я особо и не вижу...