Sass за 15 минут

1
13013
Добавить в избранное

Конечно, 15 минут — слишком короткое время для освоения практически чего угодно, в том числе и Sass, однако для ознакомления этого вполне может хватить.

Если вы пишете очень много кода на CSS, препроцессор может значительно сократить объём вашей работы и ваш уровень стресса. Использование таких инструментов, как Sass, Less, Stylus или PostCSS делает ваши CSS-файлы более читабельными и облегчает последующую их поддержку. Благодаря переменным и функциям код становится более организованным и позволяет разработчикам быстрее работать и совершать меньше ошибок.

В этой статье мы разберём, как он работает и как что-то сделать с его помощью.

Начало

Браузер не распознает файлы Sass, так что сначала их нужно скомпилировать в обычный CSS. Поэтому вам необходимо иметь что-нибудь для конвертации .scss файлов в .css. На этот счёт есть несколько возможных решений:

  • Самое простое решение — браузерный конвертер для компиляции Sass на месте — SassMeister.
  • Использование приложений: существуют как платные, так и бесплатные приложения. Можете узнать больше, перейдя по этой ссылке.
  • Если вы любитель командной строки, как мы, то можете установить Sass на ваш компьютер и скомпилировать файлы вручную.

Если вы решите использовать командную строку, то можете установить Sass в его оригинальной обёртке, написанной на Ruby, или можете попробовать Node.js порт (наш выбор). Инструмент предоставляется в разном виде, но так как мы — истинные любители Node.js, мы предпочтём порт.

Вот так можно скомпилировать .scss файлы, используя командную строку:

Также пришло время упомянуть тот факт, что Sass предлагает нам два различных синтаксиса: Sass и SCSS. Оба выполняют одно и то же, просто по-разному написаны. SCSS новее и обычно считается лучше, чем предшественник, так что использовать будем его. Если хотите узнать про разницу двух подробнее, гляньте на эту статью.

Переменные

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

Ниже приведены примеры переменных как в SCSS, так и в CSS.

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

Mixin

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

Ниже приведён пример использования Mixin в коде:

Ещё один способ упростить себе работу с помощью Mixin — использование его в местах, где требуются префиксы для адаптации под разные браузеры.

Extend

Следующая особенность, на которую мы взглянем, будет @extend, она позволяет вам наследовать CSS-свойства одного селектора от другого. Принцип работы напоминает Mixin, но Extend, как правило, используется для того, чтобы создать логическую связь между элементами страницы.

Extend используется, когда нам, к примеру, нужно два похожих элемента, которые имеют некоторые отличия. Например, давайте возьмём две кнопки: согласие и отмена.

Если вы взгляните на CSS код, то заметите, что Sass скомбинировал селекторы вместо повторения одних и тех же строк несколько раз в коде.

Вложенные конструкции

Как известно, в HTML, как правило, программист пишет код по принципу «гнездования». Иными словами, блоки кода находятся в других блоках кода и содержат вложенные блоки кода. CSS же в этом плане представляет собой полнейший хаос. Если для вас это проблема, Sass может помочь вам в организации кода.

Вот пример кода на SCSS:

И он же на CSS:

Операции

Вы можете выполнять различные математические операции прямо в коде, что значительно упрощает работу в некоторых случаях.

Хоть сейчас и обычный CSS предлагает те же возможности, правда в форме calc(), альтернативный вариант на Sass быстрее в написании, имеет операцию mod (%) и применяется на более широком спектре типов данных (цвета, строки).

Функции

В Sass имеется целый ряд встроенных функций разного рода. К примеру, функции для операций со строками, цветами или выполняющие различные математические операции вроде random() или round().

Чтобы было нагляднее, представим функцию darken($color, $amount), которая, как понятно из названия, затемняет или применяет hover.

Фрагмент кода на SCSS

И он же на CSS

Вдобавок к огромному списку встроенных функций, вы также можете объявлять свои собственные.

Материалы по Sass

Заключение

Часть из приведённого выше, к слову, рано или поздно дойдёт и до обычного CSS, но пока препроцессоры — отличный способ облегчить процесс написания кода, и Sass — неплохой вариант для выбора.

Другие статьи по теме

Пишем небольшой проект на Bootstrap 4

Объяснение современного JavaScript для динозавров

Интересуетесь веб-разработкой?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий