Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке CSS-препроцесор?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**CSS-препроцесор** (наприклад, Sass/SCSS, LESS, Stylus) - це інструмент, який додає до CSS змінні, вкладеність, міксини та функції, а потім компілює цей код у звичайний CSS, зрозумілий браузеру. **Ключове:** незалежно від можливостей препроцесора, результатом завжди є стандартний CSS, який виконує браузер.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення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, який виконує браузер.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.