#фишка дня Пользовательские свойства CSS, иногда с лёгкой рук | Будни разработчика

#фишка дня

Пользовательские свойства CSS, иногда с лёгкой руки своей же функции называемые переменными, уже весьма плотно обосновались в стилях.

Особенностей работы с ними огромное множество, но меня повеселил один интересный подход.

Итак, если установить свойству пустое значение при помощи комментария (/**/), парсер пропустит его и использует следующее определение. Получается условный оператор на коленке.

Например:
body {
background-color:
var(--mq-small, sandybrown)
var(--mq-large, mediumslateblue);
}


Здесь mq означает «Media Query». Уже догадались, что будет дальше?

Правильно! Можно сбросить значение свойства до пустого по медиа-запросу! Тогда браузер просто пропустит его и применит следующее:

@media (min-width: 640px) {
:root {
--mq-small: /**/ ;
}
}
@media (max-width: 639.5px) {
:root {
--mq-large: /**/ ;
}
}


В общем, чтобы далеко не ходить, держите CodePen: https://codepen.io/alinaki/pen/xxgjYpb

Так можно поступать не только с медиа-запросами, но и с псевдоклассами (:hover и т. д.). Теперь вам достаточно лишь изменить значение свойства, а не перезаписывать всё правило целиком.