У цій статті ми розглянемо особливості SCSS та його практичне застосування. Також ми порівняємо мови препроцесора SCSS та Sass із чистим CSS і дізнаємося, чому користуватися препроцесорами зручніше.
Зміст
У CSS багато можливостей, але водночас й багато обмежень. Зараз широко використовуються фреймворки та бібліотеки JavaScript, ES6, модулі npm, і користуватися чистим CSS вже незручно.
Тому створено зручні мови, які компілюються в CSS. Їх компілюють препроцесори, тому такі мови називаються мовами препроцесора.
Sass (Syntactically Awesome Style Sheets) — один із найпопулярніших таких інструментів. У нього додано можливості, які поки що недоступні в CSS. Ці можливості спрощують обслуговування сайтів та застосунків.
Існує два синтаксиси Sass. Для одного з них використовується розширення файлу .scss, а для іншого — .sass. У цій статті ми будемо використовувати SCSS.
Це мова препроцесора, яку розробили Кріс Еппштейн (Chris Eppstein) та Наталі Вайценбаум (Natalie Weizenbaum). Спроєктував синтаксис SCSS Гемптон Кетлін (Hampton Catlin).
Синтаксис SCSS (Sassy CSS) заснований на CSS. Якщо точніше, то будь-який файл .css — допустимий файл .scss. Іншими словами, Sassy CSS — це CSS з можливостями Sass.
Давайте для початку порівняємо два синтаксиси препроцесора.
Основні відмінності між SCSS та Sass полягають у синтаксисі.
SCSS більше нагадує CSS. Завдяки цьому CSS-файли легше перетворити у формат SCSS.
Приклад коду SCSS:
$primary-color: #3bbfce;
$secondary-color: #ff8700;
.content {
background-color: $primary-color;
color: darken($secondary-color, 9%);
} У Sass не використовуються фігурні дужки та крапки з комою, натомість мають значення відступи та символи нового рядка. Це Ruby-подібний синтаксис. За рахунок такого синтаксису код Sass коротший і його зручніше вводити.
Приклад коду Saas:
$primary-color: #3bbfce $secondary-color: #ff8700 .content-navigation background-color: $primary-color color: darken($secondary-color, 9%)
По суті, відмінності між Sass та SCSS зводяться до трьох пунктів:
Докладніше ми розглянемо можливості SCSS у наступних розділах, а перед цим встановимо препроцесор.
Якщо ви користуєтеся Node.js, встановіть Sass за допомогою npm:
npm install -g sass
Це реалізація на JavaScript, тому вона працює повільніше, ніж інші, але інтерфейс використовується той самий.
Якщо ви користуєтесь Chocolatey, встановите Dart Sass:
choco install sass
Якщо ви користуєтеся менеджером пакетів Homebrew для Mac OS X або Linux, встановіть Dart Sass такою командою:
brew install sass/sass/sass
Для компіляції використовується така команда:
sass <вихідний-файл-scss> <цільовий-файл-css>
Щоб не запускати компілятор Sass при кожній зміні коду, процес можна автоматизувати. Для цього можна дати йому команду відстежувати зміни файлів у зазначеному каталозі й автоматично перекомпілювати їх в іншому каталозі зі збереженням імен файлів. При цьому забезпечується відділення вихідного коду SCSS від скомпільованого коду CSS.
Створимо папку для проєкту та запустимо в терміналі такі команди:
mkdir src mkdir src/scss mkdir public mkdir public/css sass --watch src/scss/:public/css/
Тепер завантажимо HTML-файл, на якому ми будемо тренуватися:
curl -o index.html https://github.com/andriy-denysenko/scss-sample/blob/main/public/index.html
У каталозі src/scss створимо файл styles.scss, точку входу (вона вказана у index.html). Якщо ви запустили sass --watch, то він буде автоматично компілюватися в CSS-файл у папку public/css.
Зміни можна переглядати, оновлюючи сторінку.
Потренуйтеся вносити зміни в стиль та оновлюйте HTML-сторінку, щоб побачити їхні результати:
body {
font-family: sans-serif;
text-align: left;
}
Якщо ви вже знайомі з CSS, то вам не важко буде освоїти SCSS. Для цього потрібно тільки вивчити синтаксис додаткових можливостей мови.
Змінні — одне з найпростіших розширень. Перед іменем змінної ставиться символ $. Змінній присвоюється значення, потім вона використовується в коді. Створимо для прикладу файл in.css:
$text-color: #932d44;
body {
color: $text-color;
}
Щоб скомпілювати код, запустіть таку команду:
sass in.scss out.css
У результаті буде створено два файли: CSS-файл та файл перетворень
У CSS-файлі значення змінної буде підставлено у властивість:
body {
color: #2d2f30;
}
/*# sourceMappingURL=out.css.map */ Тепер уявіть, що колір #2d2f30 використовується не тільки у елементі body, а й в інших елементах або в декількох файлах. Якщо під час роботи над проєктом вирішено змінити колір, то доведеться змінювати його у всіх файлах. Але завдяки змінній ми змінимо колір лише в одному місці: під час ініціалізації $text-color.
У CSS-файлі файл перетворень вказано в коментарі. А як із коментарями в SCSS?
У SCSS використовуються як однорядкові, так і багаторядкові коментарі. У CSS обидва типи коментарів укладаються між /* и */. У SCSS для однорядкових коментарів також використовуються символи //:
// Це однорядковий коментар /* Це теж однорядковий коментар */ /* Цей коментар розміщен на декількох рядках */
Подивимося, що відбувається з коментарями під час компіляції. Додамо коментарі обох типів у вихідний код:
/* Використання змінних
та коментарів у SCSS */
$text-color: #2d2f30;
body {
color: $text-color; // Black Beauty
}
Скомпілюємо файл і відкриємо out.css:
@charset "UTF-8";
/* Використання змінних
та коментарів у SCSS */body {
color: #2d2f30;
}
/*# sourceMappingURL=out.css.map */ Бачимо, що коментарі в стилі CSS залишилися, а однорядкові коментарі не перетворені в інший формат, а видалені. Логічно, адже ми працюємо з кодом SCSS, і коментарі нам потрібні в ньому.
Зазвичай на сайтах використовується палітра з п’яти-шести кольорів. Подивимося, як Sass допоможе нам керувати кольорами сайту. Ми збережемо визначення кольорів на сайті _colours.scss.
Якщо ім’я файлу починається з підкреслення, Sass не компілює його. Такі файли називаються частковими (partials):
/* Palette based on Pantone's color of the year 2023 https://www.pantone.com/color-of-the-year/2023 */ $primary-color: #932d44; // Viva Magenta $secondary-color: #943e6f; // Rose Violet $text-light-color: #ffffff; // White $text-dark-color: #2d2f30; // Black Beauty $success-color: #318959; // Island Green $info-color: #2e7e94; // Horizon Blue $warning-color: #8e4c2a; // Gold Flame $error-color: #6b232d; // Peony
Щоб скористатися цією палітрою, ми можемо дати Sass інструкцію імпортувати вміст _colours.scss до нашої основної таблиці стилів. Для цього помістимо оператор @import до файлу styles.scss:
@import "_colors.scss";
SCSS дає змогу вкладати селектори один в одного. Завдяки цьому в таблицях стилів підтримується візуальна ієрархія, як і в HTML:
.header {
color: $light-color;
font-size: 2rem;
margin: 1em 0.5em;
.logo-text {
font-weight: bold;
padding: 0.5em;
background-color: $secondary-color;
border-radius: 10px;
}
.site-title {
font-weight: normal;
padding: 0.5em;
}
}
Типовим прикладом використання вкладених елементів може послужити навігація на сайті, коли визначення елементів ul, li та a вкладуються у елемент nav.
Однак не слід надмірно використовувати вкладеність, оскільки в результаті буде отримано занадто перевантажений CSS, який складно підтримувати.
На нашій сторінці буде чотири типи повідомлень, які відрізняються тільки кольорами. Ми можемо визначити для них батьківський клас, властивості якого будуть успадковуватися в класах повідомлень.
Перед іменем батьківського класу ставиться символ %:
%alert {
border: 1px solid $dark-color;
border-radius: 10px;
margin: 1em;
padding: 0.5em;
.alert-title {
font-weight: bold;
margin-bottom: 0.5em;
}
}
Щоб визначення класу успадкувало властивості батьківського класу, в нього треба включити директиву @extend і вказати після неї ім’я батьківського класу зі знаком відсотка на початку:
.success {
@extend %alert;
background-color: $success-color;
}
.info {
@extend %alert;
background-color: $info-color;
}
.warning {
@extend %alert;
background-color: $warning-color;
}
.error {
@extend %alert;
background-color: $error-color;
}
Міксини дають більше гнучкості порівняно зі наслідуванням, тому що їм можна передавати змінні.
У нашому прикладі є два типи кнопок, кольори яких інвертуються при наведенні курсора. Усі їхні параметри однакові, крім кольору фону (який стає кольором тексту при наведенні курсора).
Для створення міксину використовується директива @mixin, якій присвоюється ім’я. За ім’ям у дужках перелічуються параметри, які можна використовувати в тілі міксину.
Для параметрів можна через двокрапку вказати значення за замовчуванням:
@mixin button($background-color: $success-color){
border: 1px solid $dark-color;
border-radius: 5px;
color: $light-color;
background-color: $background-color;
margin: 0.3em;
padding: 0.3em 0.4em;
cursor: pointer;
&:hover {
background-color: $light-color;
color: $background-color;
}
}
Щоб використовувати міксин, потрібно вказати директиву @include, а після неї поставити ім’я міксина. Для кнопки підтвердження не передаємо аргумент, оскільки кольором її фону слугує вказаний за замовчуванням $success-color.
Для кнопки відмови ми передаємо колір фону в параметрі міксину:
.confirm-button {
@include button ();
}
.reject-button {
@include button ($secondary-color);
}
У SCSS підтримуються оператори +, -, *, math.div() та %. У нашому прикладі визначено змінну для розміру шрифту:
$size: 1em;
Для вказівки розміру тексту блоків класу feature ми пишемо:
font-size: 0.9 * $size;
Зверніть увагу, що для ділення використовується не символ /, а метод math.div(). Так зроблено для спрощення компіляції, щоб залишити косу риску тільки як роздільник.
Ось п’ять конвертерів, які підтримують підсвічування синтаксису та здатні виявляти синтаксичні помилки:
До попередніх трьох ресурсів можна додати наступні два, з подібними можливостями:
Як видно на прикладах, писати код на SCSS набагато зручніше, ніж на чистому CSS. Препроцесори дають змогу реалізувати принцип DRY (Don’t Repeat Yourself), тобто повторно використовувати код. Завдяки їм стає набагато легше підтримувати стилі і вносити в них зміни.
Побачити картинку цілком можна на прикладі коду з цього репозиторію:
Резиденти Дія.City сплатили до бюджету понад 8 млрд грн податків в І кварталі 2025 року.…
У Китаї закликають офісних працівників не працювати надто багато — держава сподівається, що вільний час…
Експерти звертають увагу на тривожну тенденцію: люди все частіше використовують ChatGPT, щоб визначити місцезнаходження, зображене…
Компанія JetBrains випустила нову версію мультимовного середовища розробки IntelliJ IDEA 2025.1. Оновлена IDE отримала численні…
Платформа обміну миттєвими повідомленнями Discord впроваджує функцію перевірки віку за допомогою сканування обличчя. Зараз вона…
Wikipedia намагається захистити себе від тисяч різноманітних ботів-скрейперів, які сканують дані цієї платформи для навчання…