Из первой статьи вы узнали, что такое кастомные свойства в CSS и как они работают. С их появлением у разработчиков возникли закономерные вопросы: в чём же их отличие от препроцессоров и зачем применять новый инструмент, если и старый решает основные задачи? Препроцессоры позволяют внедрить в код множество удобных абстракций: миксины, условные директивы, наследование свойств. Но препроцессоры не ориентируются в структуре DOM-дерева, поэтому их переменные не работают при некаскадном подходе в написании кода. А кастомные свойства в CSS работают, ведь значение кастомного свойства, определённого на уровне какого-либо элемента, наследуется потомками. Это их основная особенность — изучим её подробнее.

Область видимости и применение в каскаде

Кастомные свойства, как и SASS-переменные, можно задавать глобально или на уровне любого DOM-элемента.

Пример на SCSS

$size: 300px;
$color: #1e1e1e;

.block {
  width: $size;
  height: $size;
  background-color: $color;

  &__element {
    $size: 200px;
    $color: #fff;
    width: $size;
    height: $size;
    background-color: $color;
  }
}

Родительский блок будет 300х300 пикселей и тёмно-серого цвета. Дочерний элемент — 200х200 пикселей и белого цвета. Теперь сделаем то же самое кастомными свойствами.

#статьи #css #веб-разработка #фронтенд