У цій статті ми розглянемо особливості SCSS та його практичне застосування. Також ми порівняємо мови препроцесора SCSS та Sass із чистим CSS і дізнаємося, чому користуватися препроцесорами зручніше.

Що таке SCSS

У 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 та 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 зводяться до трьох пунктів:

• для поділу блоків у Sass використовуються відступи замість фігурних дужок;
• для поділу оголошень у Sass використовується символ нового рядка замість крапки з комою;
• у файлів Sass розширення .sass, а у SCSS — .scss.

Докладніше ми розглянемо можливості SCSS у наступних розділах, а перед цим встановимо препроцесор.

Встановлення та компіляція

npm

Якщо ви користуєтеся Node.js, встановіть Sass за допомогою npm:

npm install -g sass

Це реалізація на JavaScript, тому вона працює повільніше, ніж інші, але інтерфейс використовується той самий.

Встановлення у Windows (Chocolatey)

Якщо ви користуєтесь Chocolatey, встановите Dart Sass:

choco install sass

Встановлення в Mac OS X або Linux (Homebrew)

Якщо ви користуєтеся менеджером пакетів 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-файл та файл перетворень JSON-файл, що зв'язує CSS-файл із вихідними файлами, які зазвичай написані на препроцесорах (наприклад, Less, Sass, Stylus тощо). Призначений для налагодження в браузерах у режимі реального часу.:

У CSS-файлі значення змінної буде підставлено у властивість:

body {
  color: #2d2f30;
}

/*# sourceMappingURL=out.css.map */

Тепер уявіть, що колір #2d2f30 використовується не тільки у елементі body, а й в інших елементах або в декількох файлах. Якщо під час роботи над проєктом вирішено змінити колір, то доведеться змінювати його у всіх файлах. Але завдяки змінній ми змінимо колір лише в одному місці: під час ініціалізації $text-color.

У CSS-файлі файл перетворень вказано в коментарі. А як із коментарями в SCSS?

Коментування в 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

Ось п’ять конвертерів, які підтримують підсвічування синтаксису та здатні виявляти синтаксичні помилки:

• {CSS}Portal. Введіть SCSS у текстове поле та скомпілюйте, натиснувши відповідну клавішу. Отриманий CSS можна скопіювати в буфер обміну або завантажити. На цьому сайті можна також конвертувати CSS у SCSS:

• {JSON formatter}. Введіть SCSS вручну або завантажте із зазначеної URL-адреси, скомпілюйте його, а потім скопіюйте в буфер обміну або збережіть у вигляді CSS-файлу.

• Bfotool. Надає такі самі можливості, як і попередній сервіс, а на додачу дає можливість завантажити локальний файл.

До попередніх трьох ресурсів можна додати наступні два, з подібними можливостями:

• atatus

• wtools.io

Висновок

Як видно на прикладах, писати код на SCSS набагато зручніше, ніж на чистому CSS. Препроцесори дають змогу реалізувати принцип DRY (Don’t Repeat Yourself), тобто повторно використовувати код. Завдяки їм стає набагато легше підтримувати стилі і вносити в них зміни.

Побачити картинку цілком можна на прикладі коду з цього репозиторію: