Преимущества использования препроцессора (Sass) в разработке CSS

«Скрипт программы цифровых обоев» от Maik Jonietz на Unsplash

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

Тем не менее, обслуживание и читаемость кода CSS становится все труднее по мере роста проекта. Работа с тысячами строк CSS-правил тратит время разработчиков и повышает стоимость проекта. Поскольку проект становится больше, CSS вызывает некоторые проблемы, такие как:

  • Большие усилия для небольших изменений
  • Трудности в структурировании кода
  • Избыточность кода
  • Бесконечные линии CSS классов и правил

Препроцессор помогает нам справиться с этими проблемами. У этого есть некоторые преимущества перед обычным CSS. Прежде чем мы углубимся, сначала объясним, что такое CSS-препроцессор…

Что такое препроцессор CSS?

Программа / инструмент, имеющий собственный синтаксис, который компилируется позже в стандартном коде CSS.

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

Существуют разные препроцессоры, такие как Sass, Less и Stylus. В этой статье я объясню некоторые преимущества Sass.

Что такое Sass?

Ссылка: официальный сайт Sass

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

FAQ: Sass против SCSS

Это часто задаваемый вопрос. На самом деле они оба Sass с разным синтаксисом. SCSS в основном более новая версия, Sass Version 3.

Пример синтаксиса Sass:

$ цвет: серый
= Мой-шрифт ($ цвет)
  семейство шрифтов: Arial, Helvetica, без засечек
  размер шрифта: 16 пикселей
  цвет: $ цвет
тело
  фон: $ цвет
  маржа: 0
  + Мой-шрифт (белый)

Пример синтаксиса SCSS:

$ цвет: серый;
@mixin my-font ($ color) {
  семейство шрифтов: Arial, Helvetica, без засечек;
  размер шрифта: 16 пикселей;
  цвет: $ цвет;
}
тело {
  фон: $ color;
  поле: 0;
  @include my-font (белый);
}

Как мы видим, SCSS (Sassy CSS) имеет CSS-подобный синтаксис, который намного легче читать. Это расширение CSS, тогда как Sass имеет более другой синтаксис. Их расширение файла также отличается: .sass & .scss.

Вы можете прочитать больше об этом здесь. Давайте двигаться дальше с функциями Sass.

Особенность # 1: Переменные

Различные классы CSS могут содержать одно и то же правило или правила в проекте. Например, у нас есть 20 полей на нашей веб-странице с разными цветами фона:

.box-1 {
   ширина: 100 пикселей;
   высота: 100 пикселей;
   фон: красный;
}
.box-2 {
   ширина: 100 пикселей;
   высота: 100 пикселей;
   фон: желтый;
}
...
.box-20 {
   ширина: 100 пикселей;
   высота: 100 пикселей;
   фон: синий;
}

Позже наш клиент передумает и хочет большие коробки. Поэтому мне нужно увеличить свойства ширины и высоты каждого класса по одному. Это также может быть 50 классов. В реальной жизни это может быть неприятно. Как я упоминал выше, это пример больших усилий для небольших изменений.

Как мы можем сделать это более эффективно?

Sass предлагает решение: переменные. Как и в других языках программирования, мы можем использовать переменные для хранения значений и их последующего использования.

Определение переменной:

$ variable-name: value;

Возвращаясь к примеру выше, если мы определим переменные для ширины и высоты:

$ box-width: 100px;
$ box-height: 100px;

позже, когда понадобятся изменения, нужно только изменить их значения один раз:

$ box-width: 200px; // изменено с 100 на 200 пикселей
$ box-height: 200px; // вот и все!
.box-1 {
   ширина: $ box-width; // теперь используем переменные вместо пикселей
   высота: $ box-height;
   фон: красный;
}
.box-2 {
   ширина: $ box-width;
   высота: $ box-height;
   фон: желтый;
}
...
.box-20 {
   ширина: $ box-width;
   высота: $ box-height;
   фон: синий;
}

Сам CSS также теперь поддерживает переменные, но он не работает в IE и старых версиях других браузеров:

https://caniuse.com/

Особенность № 2: Вложение

Стандартный CSS не поддерживает вложение. Мы не можем написать класс внутри другого класса. По мере того как проект становится больше, возникает проблема с читабельностью, а структура выглядит не очень хорошо.

Например, давайте определим меню навигации с интерактивными ссылками в HTML ниже:

<Нав>
  

HTML поддерживает вложенный код. Однако без вложенности они выглядят так в CSS:

CSS классы для меню навигации

Мы должны были написать nav для каждого тега, даже для псевдокласса якоря (hover), потому что nav является родительским тегом для всех. Sass, однако, поддерживает вложение:

Те же классы с Sass

Здесь мы можем написать более структурированный код, как в HTML. Нам не нужно писать класс nav после класса, что также предотвращает избыточность

Важно: не рекомендуется вкладывать классы глубже 3-х уровней.

Особенность № 3: Mixins

Выше мы узнали, как использовать переменные для правил CSS. Но что, если нам нужно использовать группу правил вместе? У Sass есть функция, называемая mixins, которая позволяет нам делать это.

Что такое миксин?

Миксины - это функции Sass, которые группируют объявления CSS вместе. Мы можем использовать их позже как переменные.

Мы можем создать mixin с помощью команды @ mixin, за которой следует имя:

@mixin my-font {
  семейство шрифтов: Arial, Helvetica, без засечек;
  размер шрифта: 16 пикселей;
  стиль шрифта: курсив;
}

или мы можем создать миксин как функцию и добавить параметры:

$ font-color: красный;
@mixin my-font ($ font-color) {
  семейство шрифтов: Arial, Helvetica, без засечек;
  размер шрифта: 16 пикселей;
  стиль шрифта: курсив;
  цвет: $ font-color;
}

После создания миксина мы можем использовать его в любом классе с помощью команды @ include. Таким образом, мы можем использовать миксин my-font вместо 4 строк правил шрифтов каждый раз. Этот подход упрощает код.

п {
  @include my-font;
}
Использование mixins - хороший способ предотвратить избыточность кода.

Функция № 4: Импорт

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

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

Все, что вам нужно, это импортировать файл Sass с помощью команды @ import в другой файл Sass:

// Ваш основной файл Sass
@импортировать файл';
@import 'anotherFile';
.класс {
  // Ваш код
}
Нам не нужно использовать расширения .scss в пути к файлу, Sass поймет это.

Итак, вот некоторые важные особенности Sass, которые помогают нам писать более эффективный код CSS. Есть и другие приятные функции, может быть, я расскажу о них в другой статье. Для лучшего понимания вы можете установить Sass в вашу систему. Или вы можете напрямую начать кодирование на codepen.io.

Я надеюсь, что вы найдете эту статью полезной. Если есть что-то, чего вы не понимаете, прокомментируйте ваши вопросы ниже.

Проверьте мой профиль для других статей:

Большое спасибо и до следующего раза!

Эта история опубликована в журнале The Startup, крупнейшем издании по предпринимательству, за которым следят +387 966 человек

Подпишитесь, чтобы получать наши главные истории здесь.