Що таке CSS-препроцесор?
CSS-препроцесор, це інструмент, який розширює можливості звичайного CSS, додаючи до нього змінні, функції, обчислення, вкладеність селекторів та інші «програмні» можливості. Потім препроцесор компілює свій код у звичайний CSS, який розуміють браузери.
Навіщо він потрібен
- спрощує підтримку великих CSS-файлів
- дозволяє повторно використовувати код
- допомагає писати стилі швидше і структурованіше
Що з'являється понад звичайний CSS
| Можливість | Приклад |
|---|---|
| змінні | @color: #333; |
| вкладеність | селектори всередині селекторів |
| міксини | багаторазові блоки коду |
| функції | обчислення (100% - 20px) |
| імпорти | розбиття стилів на модулі |
Популярні препроцесори
- Sass (SCSS)
- LESS
- Stylus
Найчастіше використовується Sass/SCSS, це стандарт де-факто.
Приклад (SCSS → CSS)
SCSS:
scss
$main: #3498db;
button {
color: $main;
&:hover {
color: darken($main, 10%);
}
}Скомпільований CSS:
css
button {
color: #3498db;
}
button:hover {
color: #2b7cad;
}Підсумок: препроцесор, це надбудова над CSS, яка робить код зручнішим і потужнішим, але зрештою все одно перетворюється на стандартний CSS, який виконує браузер.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.