Преимущества использования препроцессора (Sass) при написании CSS
“program script digital wallpaper” by Maik Jonietz on Unsplash
В сети ведётся много споров о том, стоит ли использовать CSS-препроцессор в разработке. По моему личному мнению, препроцессор излишен для маленьких веб-проектов и приложений.
Тем не менее, по мере разрастания проекта поддержка и читаемость CSS становится всё труднее. Разработчики тратят больше времени при работе с тысячами строк CSS-правил, из-за чего повышается стоимость проекта. Поскольку проект становится больше, CSS вызывает некоторые проблемы, такие как:
- Большие усилия для внесения небольших изменений
- Трудности при структурировании кода
- Избыточность кода
- Бесконечные строки CSS-классов и правил
Препроцессор помогает нам справиться с этими проблемами. Он имеет некоторые преимущества перед обычным CSS. Прежде чем мы погрузимся глубже в тему, для начала стоит выяснить, что же такое CSS-препроцессор…
Что такое CSS-препроцессор?
Это программа/инструмент, имеющая свой собственный синтаксис, который затем компилируется в стандартный CSS-код.
Препроце с сор имеет свой собственный синтаксис, чтобы разработчики могли писать более простой и чистый CSS-код. Так как браузеры не понимают такой синтаксис, он преобразовывается, и на выходе получается привычный CSS в отдельном файле.
Существуют различные препроцессоры, такие как Sass, Less и Stylus. В этой статье я расскажу о некоторых преимуществах Sass.
Что такое Sass?
Sass является одним из наиболее широко используемых CSS-препроцессоров. Он имеет различные функции, помогающие разработчикам писать CSS-код лучше и чище. За более подробной информацией вы можете обратиться к официальному сайту Sass и GitHub-репозиторию.
FAQ: Sass или SCSS
Это часто задаваемый вопрос. На самом деле, они оба являются Sass-препроцессором, просто имеют разный синтаксис. Проще говоря, SCSS — это новый синтаксис Sass 3 версии.
Пример синтаксиса Sass:
Пример синтаксиса SCSS:
Как мы можем видеть, SCSS (Sassy CSS) имеет CSS-подобный синтаксис, который намного легче читается. Он является расширением CSS, в то время как синтаксис Sass имеет более существенные отличия. Они также имеют разное расширение файла: .sass и .scss .
Подробнее об этом можно прочитать здесь. А теперь давайте перейдем к особенностям Sass.
Особенность #1: Переменные
В одном проекте разные CSS-классы могут содержать одинаковое правило или группу правил. Например, на странице у нас есть 20 блоков с разным цветом фона:
Позже наш клиент передумал и захотел блоки большего размера. Поэтому мне нужно поменять значения свойств width and height один за другим для каждого класса. А классов может быть и 50. В реальном программировании это может занять много времени. Как я уже упоминал выше, это пример больших усилий для небольших изменений.
Как можно сделать это более эффективно?
Sass предоставляет решение в виде переменных. Как и в других языках программирования, мы можем использовать переменные для хранения значений и использовать их повторно.
Возвращаясь к примеру выше, можно задать переменные для свойств width и height :
Если в дальнейшем нужно будет внести изменения, мы должны будем поменять значения всего лишь один раз:
CSS теперь также поддерживает переменные, но они не работают в IE и старых версиях других браузеров:
Особенность #2: Вложенность
Стандартный CSS не поддерживает вложенность. Мы не можем написать класс внутри другого класса. С ростом проекта это приводит к проблемам с читаемостью. Структура также выглядит не очень хорошо.
Например, создадим ниже в HTML навигационное меню с гиперссылками:
HTML поддерживает вложенный код. Но CSS без вложенности будет выглядеть так:
Нам приходится добавлять класс nav для каждого тега, даже для псевдокласса hover, потому что nav является родительским тегом для всех элементов. Однако, Sass поддерживает вложенность:
Используя Sass, мы можем писать более структурированный код, как в HTML. Больше не нужно добавлять nav для каждого класса, что также предотвращает избыточность кода.
Важно: не рекомендуется допускать более 3 уровней вложенности.
Особенность #3: Mixins (миксины)
Выше мы узнали, как применять переменные для CSS-правил. Но что, если нам нужно использовать несколько правил вместе? Для этих целей у Sass есть миксины.
Что такое миксин?
Миксины (также иногда называемые примесями) являются функциями Sass, которые группируют CSS-правила. Мы можем использовать их в качестве переменных.
Миксин создается с помощью команды @ mixin и названия миксина:
Также можно создать миксин в виде функции и добавлять к ней параметры:
После создания миксина мы можем воспользоваться им в любом классе при помощи команды @ include. Таким образом, мы можем подключить миксин my-font вместо того, чтобы каждый раз писать 4 строки правил для шрифта. Такой подход упрощает код.
Использование миксинов — это хороший способ предотвратить избыточность кода.
Особенность #4: Импорт
Наконец, мы можем разбить наши огромные CSS-файлы на более мелкие с помощью Sass-функции импорта. Гораздо проще читать и поддерживать маленькие файлы, а не один большой файл с бесконечными строками.
Вообще, CSS сейчас тоже имеет функцию импорта. Но там это работает по-другому. Чтобы импортировать файл, CSS каждый раз посылает HTTP-запрос к серверу. Sass делает это без HTTP-запросов, а значит процесс происходит быстрее.
Всё, что требуется сделать — это импортировать один Sass-файл в другой, используя команду @ import:
При указании пути к файлу не нужно добавлять расширение .scss, Sass найдет его и без этого.
Что такое препроцессоры css Sass и Less
В данной статье мы рассмотрим решение для ускорения сборки front-end вашего сайта и дальнейшей быстрой его переделки.
CSS препроцессор — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.
Препроцессоры преобразуют код, написанный на препроцессорном языке, в чистый и валидный CSS-код. И на выходе мы получаем чистый, валидный, кроссбраузерный код.
Препроцессоры позволяют существенно ускорить написание css-кода, минимизировать его и облегчают его поддержку. Препроцессоры превносят в css такие вещи как переменные, вложенность конструкций, наследование, миксины, циклы, ветвления и многое другое.
Представьте что вы ведете разработку крупного проекта и в какой-то момент меняется концепция фирменного стиля сайта (хотя это справедливо и не только для крупных проектов). По новой концепции вам требуется заменить все цвета и оттенки старого сайта на совершенно другие. Тогда ваша работа сводится к долгому и муторному поиску всех вхождений старых цветов в файлы стилей и переопределение их новыми. Если Вы являетесь специалистом, то Вам будет попросту жаль потерянного времени и в следующий раз Вы будете искать решения чтобы ситуация не повторилась. А решение есть и в этой статье мы его рассмотрим.
Препроцессоры css
Препроцессоры css — это технологии, созданные с целью расширить функционал привычных нам файлов стилей (css)
Существует несколько популярных css препроцессоров таких как Sass и Less. Разумеется их гораздо больше.
у этих препроцессоров похожий принцип — создаётся файл с уникальным расширением и после его компиляции на его основе строится привычный нам файл css. Для его изменения мы также открываем файл препроцессора, изменяем его и после компиляции у нас изменяется и файл css.
Препроцессоры мы используем на стороне разработки и разворачивать их на стороне сервера не стоит.
Схема работы препроцессора css
Преимущества препроцессоров css
Использование переменных изменение значение одной переменной влечёт изменение значений сразу нескольких правил css где это значение встречалось.
Сокращение кода благодаря правилам вложенности удаётся существенно сократить и оптимизировать код, что ускоряет его загрузку.
Удобство редактирования кода дорабатывать код стало гораздо проще.
Препроцессоры и постпроцессоры CSS
Препроцессор — это программа, которой на вход дается код написанный на языке препроцессора, а на выходе мы получаем CSS, который мы можем дать на вход нашему браузеру.
Какие же есть препроцессоры? Существует несколько представителей, например: Sass (.sass, .scss), Less (.less) и Stylys (.stylus).
Постпроцессор — это программа на вход которой дается css, а на выходе получается улучшенный css.
На данный момент существует только один постпроцессор для CSS, это PostCSS.
Препроцессоры и постпроцессоры CSS можно наглядно показать картинкой:
Препроцессор Sass #
Sass это расширение CSS, которое придаёт мощи и элегантности этому простому языку. Sass даст вам возможность использовать переменные, вложенные правила, миксины, инлайновые импорты и многое другое, всё с полностью совместимым с CSS синтаксисом. Sass помогает сохранять огромные таблицы стилей хорошо организованными
Синтаксис #
Для Sass доступно два синтаксиса. Первый, известный как SCSS — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Файлы использующие этот синтаксис имеют .scss расширение.
Второй и более старый синтаксис, также известный как Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал. Файлы используемые этот синтаксис имеют расширение .sass
Любой синтаксис может импортировать файлы, написанные в другом
Использование Sass #
Sass может быть использован разными способами: как командной строкой, как отдельный модуль Ruby и как loader в webpack.
Мы будем использовать вместе с webpack.
Для этого необходимо установить:
И затем в конфиге вебпака необходимо добавить sass-loader на файлы с расширением .scss или .sass .
Лоадер необходимо использовать вместе с style-loader и css-loader
Более подробно в документации webpack
Переменные #
Вы можете хранить в переменных цвета, шрифты или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ .
Затем это будет скомпилировано в
Это очень удобно в тех случаях когда один цвет используется во многих селекторах и что бы не копировать цвет, достаточно его записать в переменную и использовать где необходимо
Переменные доступны только внутри уровня вложенного селектора где они объявляются
Математические операторы #
Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , — , * , / .
Будет скомпилировано в:
Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).
Умножение #
Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px
Деление #
С делением дела обстоят немного сложнее, ведь в стандартном CSS косая линия (слэш) уже используется. Например для border-radius
Есть три помощника, которые намекнут на возможность деления:
- Значение (или любая его часть) хранится в переменной или возвращается функцией.
- Значения заключены в круглые скобки.
- Значение используется как часть другого арифметического выражения.
Будет скомпилировано в:
Селекторы #
В Sass мы можем вкладывать один селектор в другой, это позволит нам сократить дублирование кода:
Будет скомпилировано в:
Ссылка на родительский селектор #
Что бы нам не дублировать имя родительского селектора, мы можем использовать символ & , например:
Будет скомпилировано в:
Миксины #
Еще одной прекрасной возможностью SASS являются миксины.
Миксины позволяют вам повторно использовать целые фрагменты SASS кода и при необходимости даже передавать им аргументы. И что немаловажно, вы также можете указывать их исходные значения.
Для того чтобы определить миксин используйте специально зарезервированное в SASS ключевое слово @mixin , а после него укажите выбранное вами имя миксина. Если есть необходимость в аргументах, то перечислите их в круглых скобках. Значения, устанавливаемые для аргумента по умолчанию, указываются при определении миксина через двоеточие. (*Другими словами, миксины представляют собой CSS функции.)
Процедура использования миксинов очень проста – после ключевого слова @include укажите имя нужного миксина и перечислите в скобках необходимые параметры, если таковые имеются.
Будет скомпилировано в:
Миксин с параметрами #
Будет скомпилировано в:
Пример работы с несколькими браузерами #
Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов
Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:
Директива @import #
Sass позволяет импортировать scss и sass файлы между собой с помощью директивы @import . Любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле. Например:
Функции управления цветом #
lighten и darken #
Функция lighten осветляет исходный цвет. Первым аргументом задается начальное значение цвета. Вторым аргументом является значение в процентах, на которое нужно осветлить. Функция darken аналогична lighten , но только затемняет исходный цвет
saturate и desaturate #
Функция saturate увеличивает насыщенность цвета от исходного, а функция desaturate наоборот, уменьшает насыщенность цвета от исходного
Эта функция смешивает 2 цвета в один. Другими словами, у нас имеются два цвета, представленные переменными $color и $color1 . C помощью функции mix можно смешать эти два цвета в определенной пропорции, чтобы получить на выходе один результирующий цвет.
Первым и вторым параметром передаются цвета, а третьим параметром в виде процентов задается пропорция, в которой один цвет будет смешан с другим. В нашем случае цвет $color смешан с цветом $color1 в пропорции — 70% от первого цвета $color добавляется ко второму цвету $color1 .
Постпроцессор PostCSS #
PostCSS из коробки на самом деле не делает с CSS ничего. Он просто возвращает файл, который был дан ему на вход. Изменения начинаются, когда к PostCSS подключаются плагины.
Самым популярным плагином PostCSS является Autoprefixer
Autoprefixer добавляет браузерные префиксы к вашим правилам. Например:
Использование вместе с Webpack #
Для этого немобходимо установить postcss и postcss-loader командой npm i -D postcss postcss-loader и настроить конфиг вебпака
Для работы плагина autoprefixer его необходимо установить командой npm i -D autoprefixer и добавить в конфиг postCSS, для этого необходимо создать файл postcss.config.js в корне проекта с содержимым:
Для того что бы autoprefixer понимал какие браузеры мы поддерживаем, необходимо в файле package.json добавить запись:
Где будут указаны поддерживаемые браузеры.
Для совместной работы препроцессора и постпроцессора в вебпаке, в списке лоадеров необходимо перепроцессор поставить после постпроцессора, например: