Как очистить код с помощью SASS

Итак, давайте знакомиться с SASS

SASS (Syntactically Awesome StyleSheets — Синтаксически потрясающие таблицы стилей) является препроцессорным скрипт-языком, код которого компилируется в CSS, чтобы быть понятым браузерам. У SASS есть два варианта синтаксиса:

  • оригинальный — SASS, — использующий отступы для определения блоков кода;
  • более новый — SCSS (Sassy CSS), — реализующий структуры кода фигурными скобками (о нем мы и поговорим в этой статье).

Теперь давайте посмотрим, как работает SASS

Как упоминалось выше, SASS должен быть скомпилирован, чтобы браузер его понял. Это можно легко сделать, установив и запустив sass через диспетчер пакетов. Он примет заданные вами изменения и преобразует файл sass/scss в файл css, который свяжется с вашим HTML.

Зачем такие сложности в разработке проекта?

JavaMentor
JavaMentor

Архитектура проекта — это всегда компромисс между производительностью и абстрагированием, пространством и памятью. Так же обстоит дело и в случае с использованием SASS. Да, в процессе разработки проекта вы добавляете дополнительный шаг, но при этом выигрываете в масштабируемости и легкости в сопровождении.

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

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

Несмотря на то, что каждая функция SASS способна отразить несколько принципов чистого кода, достаточно будет демонстрации одной функции для каждого принципа.

1. KISS (Keep It Simple Stupid) — Не тупи: будь проще

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

SCSS гарантирует нам следование принципу KISS путем применения директив @mixin и @include. Они позволяют написать фрагмент кода один раз и использовать его повторно, как и функции, в любом месте проекта. Включение коротких, интуитивно понятных миксинов улучшает читаемость и понимание проекта.

Подумайте над тем, как вам выровнять элементы внутри разных контейнеров, используя flexbox. Вы можете применить правила flex ко всем контейнерам, а затем настроить каждый из них с помощью других стилей. Но разве ваш код не будет еще чище, если использовать специальный @mixin для выравнивания элементов везде, где вам нужно?

SCSS vs CSS > KISS

Помимо @mixins, вы, возможно, заметили директивы @if @else. Это также функции SASS, которые позволяют применять условия. В нашем примере они упрощают код, перемещая стиль из компонента в @mixin, но не перегружая его большим количеством параметров.

2. DRY (Don’t repeat yourself) — Не повторяйся

Как следует из названия, DRY означает: “Каждый фрагмент знаний должен иметь единое, однозначное, авторитетное представление в системе”. Несмотря на то, что приведенный выше код является отличным примером для демонстрации принципа DRY, давайте рассмотрим еще одну сверхвозможность SASS — вложенность, — помогающую реализовать этот принцип:

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

Амперсанд(&) также является функцией SASS, которая позволяет связываться с ближайшим элементом — в нашем случае, с классом Button.

3. Один файл, одно назначение

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

Давайте подумаем о разработке формы со сложно применяемыми правилами и сверхспецифичными входными данными, кнопками и заголовком. Такой файл может достигать 150 строк кода или даже больше. SASS позволяет иметь основной файл формы, в который мы можем импортировать другие отдельные файлы.

Кроме того, SASS предлагает директиву @use, действительную полезную, если вам нужно импортировать только определенное правило из другого scss-файла.

Наличие такого модульного компонента позволит проекту оставаться легким в сопровождении, масштабируемым и более удобным для исправлений, если таковые понадобятся.

Бонусный совет

Мы все стремимся к разработке чистого кода, но отличная производительность также имеет для нас значение, верно? Поскольку SASS в конечном итоге компилируется в CSS, всегда думайте о том, как будет выглядеть CSS-файл после преобразования.

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

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

Надеюсь, что статья оказалась для вас полезной и помогла лучше понять, насколько препроцессор может повлиять на чистоту проекта.

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен


Перевод статьи Denisa Andreea, How to clean code with SASS

Предыдущая статья8 хитрых приемов написания кода на Go
Следующая статьяДизайн-система: иконки