CSS-препроцесори: SCSS, LESS та Stylus

CSS-препроцесори – це надбудови над CSS, спеціальні скрипти, які розширюють можливості CSS та спрощують процес створення стилів, що потім вбудовуються в CSS файли. Препроцессори надають можливість використовувати змінні, умовні оператори, цикли та інші зручні функції, які відсутні в звичайному CSS.

Порівняння трьох головних препроцесорів: SCSS, LESS та Stylus

Препроцесор SCSS (Sass)

SCSS є одним з найпопулярніших препроцесорів CSS, розробленим в 2007 році в рамках проекту Sass (Syntactically Awesome StyleSheets) Хамптона Кетліна (Hampton Catlin).
SCSS використовує синтаксис, сумісний зі звичайним CSS, з можливістю використання додаткових функцій, таких як змінні, вкладення, міксіни, умови, цикли та багато інших
Додаткові матеріали та бібліотеки можна знайти на офіційному сайті – https://sass-lang.com/

Препроцесор LESS

LESS був створений в 2009 році Алексом Міндсоном (Alexis Sellier) як відповідь на препроцесор Sass.
LESS використовує менш потужний синтаксис, порівняно з Sass, але пропонує багато зручних функцій, таких як змінні, вкладення, міксіни, умови, цикли тощо.
LESS широко використовується в різних проектах, включаючи веб-розробку, створення стилів для веб-сайтів, веб-додатків, тем та шаблонів для різних фреймворків.
Офіційний сайт – https://lesscss.org/

Препроцесор Stylus

Stylus був створений в 2010 році Тімом Смарти (TJ Holowaychuk) як препроцесор CSS, що покликаний забезпечити простоту і кращу читабельність коду.
Синтаксис Stylus є найбільш непередбачуваним зі трьох препроцесорів, оскільки він забезпечує максимальну свободу у вираженні стилів.
В Stylus можна використовувати змінні, вкладення, міксіни, умови, цикли, а також власні функції та оператори.
Stylus часто використовується в проектах, де вимагається висока гнучкість та можливість виразити стилі відповідно до власних вимог, таких як розробка фреймворків, створення власних дизайн-систем, розробка інтерфейсів користувача та інші креативні проекти
Сайт препроцесора – https://stylus-lang.com/

Порівняльна таблиця синтаксису CSS препроцесорів SCSS, LESS та Stylus

Feature	SCSS	LESS	Stylus
Variable	$color: red;	@color: red;	$color = red
Nesting	.parent { .child { … } }	.parent { .child { … } }	.parent { .child { … } }
Mixins	@mixin mixin-name($param) { … }	.mixin-name(@param) { … }	mixin-name($param) { … }
Import	@import “file”;	@import “file”;	@import “file”
Inheritance	@extend .class-name;	.class-name:extend(.base-class) { … }	.class-name:extend(.base-class) { … }
Operators	+, -, *, /, %	+, -, *, /, %	+, -, *, /, %
Control Flow	@if, @else if, @else, @for, @each, @while	& when, & otherwise, @for, @each, @while	if, else if, else, for, each, while
Functions	darken($color, 10%), lighten($color, 20%), mix($color1, $color2), etc.	darken(@color, 10%), lighten(@color, 20%), fade(@color, 50%), etc.	darken($color, 10%), lighten($color, 20%), mix($color1, $color2), etc.
Comments	// Single-line comment<br> /* Multi-line comment */	// Single-line comment<br> /* Multi-line comment */	// Single-line comment<br> /* Multi-line comment */
Escaping	#{variable}	@{variable}	{variable}
Interpolation	#{$variable}	@{variable}	#{variable}
Loops	@for $i from 1 through 3 { … }	.-each(@i; 1; 3) { … }	for $i in 1 2 3 { … }
Selectors	.class-name { … }	.class-name { … }	.class-name { … }

Приклади коду з використанням SCSS, LESS та Stylus

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

SCSS


$button-color: #007BFF;

.btn {
background-color: $button-color;
border: 1px solid darken($button-color, 10%);
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
cursor: pointer;
}

LESS



### LESS

```less
@button-color: #007BFF;

.btn {
  background-color: @button-color;
  border: 1px solid darken(@button-color, 10%);
  color: white;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

Stylus


button-color = #007BFF

.btn
  background-color button-color
  border 1px solid darken(button-color, 10%)
  color white
  padding 10px 20px
  text-align center
  display inline-block
  cursor pointer

Практичні приклади використання препроцесорів

Використання змінних для кольорів

Замість того, щоб копіювати та вставляти значення кольорів кілька разів, ви можете використовувати змінні, що спрощує зміну кольорів та забезпечує консистентність.


$primary-color: #007BFF;
$secondary-color: #6C757D;

.button-primary {
  background-color: $primary-color;
  color: white;
}

.button-secondary {
  background-color: $secondary-color;
  color: white;
}

Використання препроцесора LESS для змінних відступів


@margin-base: 16px; /* Базове значення відступу */
@margin-small: @margin-base / 2; /* Змінна, яка використовує значення базового відступу */
@margin-medium: @margin-base * 1.5; /* Змінна, яка використовує значення базового відступу */
@margin-large: @margin-base * 2; /* Змінна, яка використовує значення базового відступу */

.container {
  margin: @margin-base; /* Використання базового значення відступу */
}

.section {
  margin: @margin-medium @margin-large; /* Використання різних змінних відступів */
}

.button {
  margin: @margin-small; /* Використання змінної відступу */
}

Це приклад використання змінних відступів у LESS-файлі. Ми визначаємо базове значення відступу (@margin-base) і використовуємо його для обчислення інших змінних відступів, таких як @margin-small, @margin-medium та @margin-large. Потім ми використовуємо ці змінні відступів у різних стилевих правилах, таких як margin для різних елементів, таких як .container, .section та .button.

Після компіляції LESS-файлу в CSS, значення змінних відступів будуть замінені на відповідні числові значення, які можна використовувати на веб-сторінці для відображення відступів. Використання змінних відступів дозволяє зручно налаштовувати відстані між елементами веб-сайту з одного місця, що робить розробку більш гнучкою та легко підтримуваною.

Як вибрати препроцесор?

При виборі препроцесора враховуйте наступні фактори:

Спільнота та підтримка: Більш популярні препроцесори мають активну спільноту та більше ресурсів для навчання.
Синтаксис: Виберіть препроцесор зі зручним для вас синтаксисом. SCSS найбільш схожий на CSS, тому може бути легшим для освоєння.
Інтеграція з інструментами: Перевірте, чи підтримує ваш препроцесор вибір інструментів, таких як редактори коду, автоматизація збірки та інше.

Оптимізація роботи з препроцесорами

Використовуйте вкладення: Препроцесори дозволяють вам вкладати селектори для структурування коду. Але будьте обережні, щоб не перевантажувати вкладеність.
Використовуйте міксіни: Міксіни дозволяють вам повторно використовувати набори правил CSS. Вони зменшують дублювання коду та підвищують його читабельність.
Розбивайте код на модулі: Розділіть ваш код на декілька файлів, кожен з яких відповідає за певну частину вашого сайту. Це полегшує підтримку та розвиток проекту.

Висновки

CSS-препроцесори стали невід’ємною частиною сучасної front-end розробки, допомагаючи розробникам створювати ефективний, модульний та легко підтримуваний код. SCSS, LESS та Stylus – трійка лідерів серед препроцесорів, кожен з яких має свої переваги та недоліки. Важливо обрати той, який найкраще підходить для ваших потреб та стилю роботи.

Оволодіння препроцесорами може суттєво покращити ваші навички та продуктивність у роботі з CSS. Навчіться використовувати змінні, умовні оператори, цикли, міксіни та інші корисні функції для створення чистого, структурованого та гнучкого коду. Це полегшить вашу роботу та допоможе вам розвивати професійні навички як front-end розробника.

Якщо ви тільки починаєте шлях розробника, вивчити кращі практики ви можете на нашому безкоштовному курсі Front End.

Пам’ятайте, що відпрацювання навичок та вивчення нових інструментів вимагає часу та практики. Не засмучуйтесь, якщо вам потрібно більше часу, ніж ви очікували, адже кожен крок вперед робить вас кращим розробником. Тож продовжуйте досліджувати світ препроцесорів та насолоджуйтесь новими можливостями, які вони пропонують вам у вашій front-end розробці!

Блог Mate academy.