CSS-препроцеcсоры: SCSS, LESS и Stylus

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

Сравнение трех главных препроцессоров: SCSS, LESS и Stylus

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

SCSS является одним из самых популярных препроцессоров CSS, разработанным в рамках проекта Sass (Syntactically Awesome StyleSheets) Хэмптона Кэтлина (Hampton Catlin) в 2007 году.

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, значения переменных отступов будут заменены соответствующими числовыми значениями, которые можно использовать на веб-странице для отображения отступов. Использование переменных отступов позволяет удобно настраивать расстояния между элементами веб-сайта с одного места, что делает разработку более гибкой и легко поддерживаемой.

Как выбрать CSS препроцессор?

При выборе препроцессора учитывайте следующие факторы:

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

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

Используйте вложения: Препроцессоры позволяют вам вкладывать селекторы для структурирования кода. Но будьте осторожны, чтобы не перегружать вложенность.
Используйте миксины: Миксины позволяют вам повторно использовать наборы правил CSS. Они уменьшают дублирование кода и повышают его читаемость.
Разбивайте код на модули: Разделите ваш код на несколько файлов, каждый из которых отвечает за определенную часть вашего сайта. Это облегчает поддержку и развитие проекта.

Выводы

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

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

Если вы только начинаете свой путь разработчика, изучить лучшие практики вы можете на нашем бесплатном курсе Front End.

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

Блог Mate academy.