Каких особенностей препроцессоров нет в 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