Препроцессоры CSS – незаменимый инструмент современного веб-разработчика. Что такое Sass

От автора: о препроцессорах css говорят уже давно. Многие разработчики уже применяют их в разработке своих проектов. Есть и такие, кто слышал о препроцессорах или читал про них, но не понимает, какие преимущества дают препроцессоры при написании css кода.

Для многих препроцессоры – это «секретная» технология, преимущества которой весьма условны и неочевидны. В данной статье я расскажу простым языком о том, что такое препроцессоры, для чего они нужны и как они могут помочь веб-разработчику.

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

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

То есть это не «революционная сверхтехнология». Это то, что расширяет возможности css. Это то, что может автоматизировать рутинные ежедневные операции и ускорить разработку.

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

Как препроцессоры жизнь упрощают?

Препроцессоры позволяют ускорить написание css-кода и упрощают его поддержку в будущем.

Рассмотрим пример. На сайте используется красный шрифт. Используя чистый css, вам приходится задавать этот цвет много раз для каждого элемента в отдельности. И если вы решите со временем поменять оттенок красного — вам нужно будет его изменять для каждого элемента. Используя препроцессоры, цвет 1 раз присваивается переменной и уже эта переменная прописывается для каждого элемента. Если вы решите поменять оттенок цвета на этот раз, вам нужно будет поменять его только в одном месте.

Подобный пример встречается достаточно часто. И, как я отмечал в начале, преимуществ использования препроцессоров в этом примере не много. В любом редакторе кода мы можем нажать сочетание клавиш «ctrl»+”F”, найти код цвета «#ff0000» и заменить его на «#00ff00». И цвет поменяется с красного на зеленый во всех местах за один клик мыши.

Так в чем же реально нам могут помочь препроцессоры?

Какие проблемы решают препроцессоры?

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

Давайте посмотрим, как это все нам может помочь на реальных примерах:

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

Эту проблему препроцессоры решают без каких-либо усилий с вашей стороны. У вас может быть несколько препроцессорных файлов от вашего проекта, которые после компиляции автоматически склеятся, и на выходе вы получите один «красивый» css файл.

Еще одной проблемой css является дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты, которые можно использовать повторно. Так же может появиться масса однообразных селекторов отличающихся лишь немного. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.

Данную проблему в препроцессорах решают миксины. Миксины – это параметризованные или нет функции, которые выдают тот или иной CSS, который мы можем многократно использовать там, где нужно.

Следующая проблема – проблема зависимостей. Например, у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Для того чтобы корректно поменять один параметр, придутся подправлять все, зависящие от него.

Эту проблему очень просто решают переменные в препроцессорах.

Кроме всего перечисленного при использовании препроцессоров вы полностью исключаете риск получить ошибку в css файле, получаете более чистый, логичный и кроссбраузерный css.

Преимущества препроцессоров

Исходя из трудностей верстки, с которыми помогают справиться препроцессоры можно назвать следующие преимущества препроцессоров: использование переменных, вложенность, миксины (mixins), наследование и так далее, и так далее – это все понятно. Но больше всего я хочу обратить ваше внимание на то, что знания препроцессоров открывают перед вами возможность найти высокооплачиваемую работу, сделать скачок вверх по карьерной лестнице, увеличить ваш заработок минимум в два раза.

Давайте посмотрим, какие зарплаты предлагают веб-студии верстальщикам без знания препроцессоров на сайте hh.ru :

А вот зарплаты, которые предлагают веб-студии верстальщикам со знаниями препроцессоров на том же сайте:

Как вы можете заметить максимальная оплата труда без знаний препроцессоров и минимальная оплата со знаниями препроцессоров, отличаются в 1,5 раза. А если посмотреть по средним цифрам, то оплата отличается минимум в 2 – 3 раза!

Причем, что еще можно заметить, для этого не нужно знать все препроцессоры. Достаточно знать два самых популярных препроцессора – Sass и Less.

Вывод

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

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

P.S. Используете ли вы препроцессоры в разработке? Напишите в комментариях, какие препроцесслоры вы используете? Если пока не используете, то почему? Планируете ли начать использовать препроцессоры?

Видео презентация курса «Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки»

26.07.2017

5 Лучших CSS препроцессоров 2017 года, которые ускорят ваш рабочий процесс.

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

Иными словами, CSS препроцессор - это дополнение к CSS с новыми функциями: переменными, расширениями, импортом и так далее.

В той статье я расскажу о лучших 5 CSS препроцессорах 2017 года.

01. Sass

SASS – это самый популярный препроцессор с огромным сообществом и мощным функционалом. Он работает только в совокупности с Ruby и очень прост в изучении. Большинство front-end фреймворков, таких как Bootstrap, Foundation и materialize, построены с использованием SASS.

SASS имеет два синтаксиса:

• .sass
• .scss

02. Stylus

Stylus – еще один отличный препроцессор для динамичного генерирования CSS. Если вы хотите опустить фигурные скобки, запятые и точки с запятой, то он может стать для вас лучшим выбором. Stylus работает на Node.js и очень прост в установке и использовании. В нем есть множество кастомных функций, например, saturation(). Вы также можете использовать все функции, предоставляемые другими лидирующими компиляторами.

03. Less

Less, который также известен как Less.js или Less CSS, – еще один лидирующий CSS препроцессор. Это отличный выбор, если вам нужны такие стандартные функции как переменные, вложенные стили и так далее. Эта Javascript библиотека была изначально написана на Ruby.

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

04. Stylecow

Stylecow – препроцессор, написанный на Node, который можно установить с помощью npm. У него мощный API, с помощью которого можно легко создавать плагины.

05. CSS-Crush

Препроцессор, построенный на PHP, который станет отличным вариантом для PHP-программистов, потому что он работает на многих платформах. CSS-Crush обладает всеми обычными функциями препроцессора (переменные, вложенные стили и т.д.)

Заключение

Если вы ищете лучший CSS препроцессор, то вы найдете великое множество различных вариантов в сети. На мой взгляд, наилучшие варианты для новичков – это SASS и Stylus.

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

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

Препроцессор - это программа, которая берёт один тип данных и преобразует его в другой тип данных. В случае HTML и CSS, одни из наиболее популярных языков препроцессора - это Haml и Sass . Haml преобразуется в HTML, а Sass преобразуется в CSS.

После своего становления, при решении некоторых наиболее распространённых проблем, Haml и Sass нашли много дополнительных способов для расширения возможностей HTML и CSS. Не только путём удаления неэффективных задач, но также созданием методов, делающих разработку сайтов проще и логичнее. Популярность препроцессорам также принесли различные фреймворки, которые их поддерживают; одним из наиболее популярных является Compass.

Haml

CodeKit также поддерживает другие препроцессоры, которые тоже могут вам пригодиться.

Доктайп

Первая часть при написании документа на Haml - это знание, какой тип доктайпа надо использовать. При работе с HTML-документами основным типом документа будет HTML5. В Haml типы документов определяются тремя восклицательными знаками (!!!), затем идёт что-то конкретное при необходимости.

По умолчанию доктайп в Haml - это HTML 1.0 Transitional. Поэтому чтобы сделать его как HTML5, нужно передать цифру пять после восклицательных знаков (!!! 5).

Готовый HTML

Объявление элементов

Одной из определяющих особенностей Haml является его синтаксис и то, как объявлять и вкладывать элементы . Элементы HTML, как правило, содержат открывающий и закрывающий теги, однако в элементах Haml есть только один открывающий тег. Элементы начинаются со знака процента (%), а затем отступ определяет вложенность. Отступ в Haml можно выполнить одним или несколькими пробелами, однако важно, чтобы отступы оставались неизменными. Табуляция и пробелы не могут сочетаться друг с другом и одно и то же число табуляций или пробелов должно быть одинаковым на протяжении всего документа.

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

%body %header %h1 Привет, мир! %section %p Lorem ipsum dolor sit amet.

Скомпилированный HTML

Привет, мир!

Lorem ipsum dolor sit amet.

Обработка текста

Текст в Haml может быть размещён на той же строке, что и объявленный элемент или с отступом ниже элемента. Текст не может быть одновременно на той же строке, что и объявленный элемент, и вложенным ниже него; должен быть или тот или другой вариант. Приведённый выше пример можно переписать в следующем виде:

%body %header %h1 Привет, мир! %section %p Lorem ipsum dolor sit amet.

Атрибуты

Атрибуты, как и элементы, объявляются немного по-другому в Haml. Атрибуты объявляются непосредственно после элемента, в фигурных или круглых скобках, в зависимости от того, хотите вы использовать синтаксис Ruby или HTML. Атрибуты в стиле Ruby будут использовать стандартный синтаксис хэша внутри {}, в то время как атрибуты в стиле HTML будут использовать стандартный синтаксис HTML внутри ().

%img{:src => "shay.jpg", :alt => "Шэй Хоу"} %img{src: "shay.jpg", alt: "Шэй Хоу"} %img(src="shay.jpg" alt="Шэй Хоу")

Скомпилированный HTML

Классы и идентификаторы

При желании классы и идентификаторы могут быть объявлены подобно другим атрибутам, однако они также могут быть обработаны несколько иначе. Вместо перечисления атрибутов class и id с их значениями внутри скобок, значение может быть определено непосредственно после элемента. Используя либо точку для классов, либо решётку для идентификатора, значение может быть добавлено сразу после элемента.

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

%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")

Скомпилированный HTML

Классы и идентификаторы в

В случае, если класс или идентификатор используется в , то %div может быть опущен, а значение класса или идентификатора может быть включено напрямую. Опять же, классы должны определяться через точку, а идентификаторы через решётку.

Awesome .awesome.lesson #getting-started.lesson

Скомпилированный HTML

Логические атрибуты

Логические атрибуты обрабатываются так же, как если они были бы в Ruby или в HTML, в зависимости от используемого синтаксиса.

%input{:type => "checkbox", :checked => true} %input(type="checkbox" checked=true) %input(type="checkbox" checked)

Скомпилированный HTML

Экранирование текста

Одним из преимуществ Haml является возможность вычислять и запускать Ruby, однако это не всегда желаемое действие. Текст и строки кода можно экранировать с помощью обратной косой черты (\), что позволяет тексту отображаться в явном виде без выполнения.

В приведённом ниже примере, первый образец = @author выполняется Ruby, получая имя авторов из приложения. Второй образец начинается с обратной косой черты, экранирующей текст, и печатается как есть без выполнения.

Author = @author \= @author

Скомпилированный HTML

Шэй Хоу = @author

Альтернативы экранирования текста

Время от времени экранирования текста недостаточно и Ruby необходим для формирования желаемого выходного результата. Одним популярным примером для этого является попытка включить точку сразу после ссылки, но не как часть текста ссылки. Размещение точки на новой строке не является приемлемым, поскольку это будет рассматриваться как пустое значение класса, вызывая ошибку компиляции. Добавление обратной косой черты перед точкой экранирует символ, однако поставит пробел между последним словом и точкой. Опять же, не производя желаемого результата.

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

%p Шэй - = succeed "." do %a{:href => "#"} молодец

Скомпилированный HTML

Шэй - молодец.

Комментарии

Подобно элементам и атрибутам, комментарии в Haml обрабатываются немного по-другому. Код может быть прокомментирован достаточно просто с использованием одной косой черты (/). Отдельные строки могут быть закомментированы с помощью косой черты в начале строки, а блоки кода могут быть закомментированы, будучи вложенными под косой чертой.

%div / Строка комментария Актуальная строка / %div Закомментированный блок

Скомпилированный HTML

Актуальная строка

Условные комментарии

Условные комментарии также обрабатываются по другому в Haml. Чтобы создать условный комментарий используйте квадратные скобки () вокруг условия. Эти квадратные скобки должны быть размещены непосредственно после косой черты.

/ %script{:src => "html5shiv.js"}

Скомпилированный HTML

Тихие комментарии

Haml также предоставляет возможность создавать особые тихие комментарии. Тихие комментарии отличаются от основных комментариев HTML тем, что после компиляции любое содержание внутри тихого комментария полностью удаляется с этой страницы и не отображается в результатах. Тихие комментарии начинаются с дефиса, затем идёт решётка (-#). Как и с другими комментариями, тихие комментарии могут быть использованы для удаления одной или нескольких строк с помощью вложенности.

%div -# Удалённая строка Актуальная строка

Скомпилированный HTML

Актуальная строка

Фильтры

Haml предлагает несколько фильтров, позволяющих использовать разные типы ввода внутри Haml. Фильтры начинаются с двоеточия, за которым идёт имя фильтра, к примеру, :markdown, со всем содержимым для фильтрации вложения под ним.

Распространённые фильтры

Ниже приведены некоторые распространённые фильтры, включая наиболее популярную группу:css и:javascript.

• :cdata
• :coffee
• :escaped
• :javascript
• :less
• :markdown
• :maruku
• :plain
• :preserve
• :ruby
• :sass
• :scss
• :textile

Фильтр Javascript

:javascript $("button").on("click", function(event) { $("p").hide("slow"); });

Скомпилированный HTML

$("button").on("click", function(event) { $("p").hide("slow"); });

Фильтры CSS и Sass

:css .container { margin: 0 auto; width: 960px; } :sass .container margin: 0 auto width: 960px

Скомпилированный HTML

.container { margin: 0 auto; width: 960px; }

Интерполяция Ruby

Как упоминалось ранее, Haml может вычислять Ruby, а иногда могут возникать случаи, когда Ruby должен вычисляться внутри обычного текста. В этом случае Ruby должен быть интерполирован путём обёртывания необходимого кода на Ruby.

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

%div{:class => "student-#{@student.name}"}

Скомпилированный HTML

SCSS и Sass

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

Ради краткости Haml и Sass были единственными препроцессоры, рассмотренные в этом уроке. Они также были выбраны потому, что построены с использованием Ruby и прямо подходят к приложениям Ruby on Rails. Они также получили огромную поддержку сообщества.

Когда речь заходит о выборе, какой препроцессор использовать, важно рассмотреть вопрос о том, что лучше для вашей команды и проекта. Проекты, построенные в Node.js могут, вероятно, больше выиграть от Jade и Stylus. Самым важным аспектом для рассмотрения, однако, является то, что ваша команда привыкла использовать. Проведите исследование для каждого проекта и выберите наиболее обоснованное решение.

Ресурсы и ссылки

• Haml - HTML Abstraction Markup Language
• Sass - Syntactically Awesome Stylesheets
• Sass Playground на SassMeister

Появились вопросы?

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

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

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

В моем понимании, это надстройка над стандартным CSS, которая расширяет стандартные возможности, добавляет некоторые функции и позволяет писать более читаемый и удобный для понимания код. На выходе исходный код компилируется в привычный нам CSS. Использование подобного инструмента в современной разработке - “must have”, и я советую каждому верстальщику или разработчику ознакомиться с ним. Следует добавить, что есть с чего выбирать, ведь существует достаточно много CSS-препроцессоров, но следует выделить самые популярные:

• Stylus

Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру:
.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue

Посмотрите на этот фрагмент кода, написанный на Sass. Всё это преобразуется в следующий CSS:

Track { color: #FFF;}
.track__title { padding: 10px;}
.track__title:hover, .track-title:focus { color: blue}

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

$btn-color: blue;
$font-main-size: 16px;

А использование будет выглядеть следующим образом:

Block {
font-size: $font-main-size;
}

Только представьте себе, как это удобно. Если вам нужно поменять цвет кнопок по всему сайту, то это достаточно сделать только в одном месте! Что же, идем дальше. Третье, и самое большое, что может нам предложить CSS-препроцессоров - это использования миксинов. В привычном для нас понимании, миксины - это функции, которые можно использовать несколько раз, не повторяя одни и те же части кода (помним об одном из принципов программирования - DRY - Don’t repeat yourself). Признаться честно, я не так часто использую миксины, видимо не было такой острой необходимости, однако несколько примеров я всё же покажу. Одна из самых используемых мной функций имеет следующий вид:

@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}

А её применение имеет следующий вид:

body {
font-size: em(14px);
}

Да, как вы поняли, это всего лишь преобразование размера шрифта из PX в Em (да здравствует те времена, когда для такой мелочи раньше пользовались специальным сервисами или считали сами на калькуляторе). Следующий пример также позволяет сэкономить много времени:

@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}

Его использования:

input, textarea {
@include input-placeholder {
color: $grey;
}
}

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