Как изменить переменную в зависимости от разрешения экрана? stylus

Использую stylus. Есть переменная $font-size = 1em, которая используется везде по проекту. Нужно, чтобы на мелких девайсах (@media screen and (max-device-width: 768px)), $font-size поменялся на 2em. Попробовала использовать if, не сработало

Ответ

Вы слишком многого хотите от препроцессоров. Насколько мне известно, такое их поведение не регламентировано правилами. Желаемого вами поведения можно добиться при помощи custom properties
:root { --fz: 2em; } .block { font-size: var(--fz); } @media (max-width: 700px) { :root { --fz: 1em; } }

This is text

При помощи препроцессоров надо создавать миксины с нужными вам свойствам, передавать в них переменные, а в медиа-выражениях вызывать миксины заново с новыми значениями переменных, чтобы переопределить свойства. Например так:
my-custom-block(fz) border-radius 5px border 1px solid font-size fz margin fz
my-custom-block(2em)
@media screen and (max-width: 700px) my-custom-block(1em)