PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

Каких особенностей препроцессоров нет в CSS?

Основы CSS

Многие возможности препроцессоров уже появились в CSS, но часть по-прежнему есть только в них.

Что уже есть в нативном CSS

  • переменные — --color и var() (причём меняются в рантайме);
  • вложенность — .card { &:hover { … } };
  • вычисления — calc(), min(), max(), clamp();
  • работа с цветом — color-mix(), относительные цвета;
  • слои и область действия — @layer, @scope.

Чего в CSS нет

  • Миксины с параметрами — переиспользуемые наборы правил (@include button($color)). В CSS пока только в виде черновика спецификации.
  • Циклы и условия — @for, @each, @if для генерации классов.
  • Функции на этапе сборки — свои функции для расчётов, работа с картами (map.get). Нативные @function и if() пока есть только в Chromium.
  • Модули с пространствами имён — @use 'tokens' as t.
  • `@extend` — наследование правил.
  • Склейка имён — &__element, &--modifier (в нативной вложенности так нельзя).
@each $name, $color in (primary: #06f, danger: #e33) {
  .text-#{$name} { color: $color; }
}

Коротко для собеседования

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

Подробнее: MDN — CSS Nesting

Другие вопросы раздела