1

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

Мой подход: имеется файл _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; 
}
 

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

2 ответа 2

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>

2
  • Это действительно работает. Спасибо. Я ожидал, что препроцессор сможет сам построить медиазапросы или установить переменные CSS, ведь у него есть информация о том, как и где я их использую.
    – witaway
    17 июл 2020 в 11:56
  • А в общем и целом, такой подход к построению адаптивности можно считать хорошей идеей, или мне стоит взглянуть на какие-нибудь другие?
    – witaway
    17 июл 2020 в 11:57
1

можно так :)

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>

4
  • О, спасибо, так тоже интересно. Жаль, что SASS не предоставляет достаточно лаконичных средств сделать это.
    – witaway
    17 июл 2020 в 12:15
  • А вообще, как люди обычно делают на продакшене? Есть какие-нибудь "лучшие практики"? :)
    – witaway
    17 июл 2020 в 12:16
  • @witaway, не знаю, каждый делает по своему, обычно числовые переменные не заводят, чаще всего встречал цвета, брейкпоинты, но, в принципе, можно завести юнит-переменную и с ней манипулировать (умножать/делить/складывать/вычитать)
    – meine
    17 июл 2020 в 13:03
  • Понял, спасибо за информацию. :)
    – witaway
    17 июл 2020 в 19:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.