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.

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

Как появились препроцессоры CSS

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

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

В 1994 году норвежский ученый Хокон Ли разработал таблицу стилей, которая могла использоваться для оформления внешнего вида страницы отдельно от HTML-документа. Идея приглянулась представителям консорциума W3C, которые тотчас же принялись за ее доработку. Спустя несколько лет вышла в свет первая версия спецификации CSS. Затем она постоянно совершенствовалась, дорабатывалась… Но концепция оставалась все той же: каждому стилю задаются определенные свойства.

Использование таблиц CSS всегда вызывало определенные проблемы. Например, у верстальщиков часто возникали трудности с сортировкой и группировкой свойств, да и с наследованием не все так однозначно.

И вот наступили двухтысячные. Разметкой все чаще начали заниматься профессиональные фронтенд-разработчики, для которых важна была гибкая и динамическая работа со стилями. Существовавший на тот момент CSS требовал расстановки префиксов и отслеживания поддержки новых возможностей браузеров. Тогда специалисты по JavaScript и Ruby взялись за дело, создав препроцессоры - надстройки для CSS, добавляющие в него новые возможности.

CSS для начинающих: особенности препроцессоров

Они выполняют несколько функций:

• унифицируют браузерные префиксы и хаки;

• упрощают синтаксис;

• дают возможность работать с вложенными селекторами без ошибок;

• улучшают логику стилизации.

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

Видя популярность таких надстроек, в W3C начали постепенно добавлять возможности из них в код CSS. Например, так в спецификации появилась функция calc(), которая поддерживается многими браузерами. Ожидается, что в скором времени можно будет задавать переменные и создавать миксины. Однако это произойдет в далеком будущем, а препроцессоры уже здесь и уже отлично работают.

Популярные препроцессоры CSS. Sass

Разработан в 2007 году. Изначально являлся компонентом Haml - шаблонизатора HTML. Новые возможности по управлению элементами CSS пришлись по вкусу разработчикам на Ruby on Rails, которые начали распространять его повсеместно. В Sass появилось огромное количество возможностей, которые сейчас входят в любой препроцессор: переменные, вложение селекторов, миксины (тогда, однако, в них нельзя было добавлять аргументы).

Объявление переменных в Sass

Переменные объявляются с помощью знака $. В них можно сохранять свойства и их наборы, например: “$borderSolid: 1px solid red;”. В этом примере мы объявили переменную под названием borderSolid и сохранили в ней значение 1px solid red. Теперь, если в CSS нам потребуется создать красный border шириной в 1px, просто указывает эту переменную после названия свойства. После объявления переменные менять нельзя. Доступно несколько встроенных функций. Например, объявим переменную $redColor со значением #FF5050. Теперь в коде CSS, в свойствах какого-нибудь элемента, используем ее для задания цвета шрифта: p { color: $redColor; }. Хотите поэкспериментировать с цветом? Используйте функции darken или lighten. Это делается так: p { color: darken($redColor, 20%); }. В результате цвет redColor станет на 20 % светлее.

Вложенность

Раньше для обозначения вложенности приходилось использовать длинные и неудобные конструкции. Представим, что у нас есть div, в котором лежит p, а в нём, в свою очередь, расположен span. Для div нам нужно задать цвет шрифта red, для p - yellow, для span - pink. В обычном CSS это делалось бы следующим образом:

С помощью препроцессора CSS все делается проще и компактнее:

Элементы буквально «вкладываются» один в другой.

Директивы препроцессора

С помощью директивы @import можно импортировать файлы. Например, у нас есть файл fonts.sass, в котором объявлены стили для шрифтов. Подключаем его в основной файл style.sass: @import ‘fonts’. Готово! Вместо одного большого файла со стилями у нас есть несколько, которые можно использовать для быстрого и легкого доступа к требуемым свойствам.

Миксины

Одна из самых интересных задумок. Дает возможность одной строкой задавать целый набор свойств. Работают следующим образом:

@mixin largeFont {

font-family: ‘Times New Roman’;

font-size: 64px;

line-height: 80px;

font-weight: bold;

Чтобы применить миксин к элементу на странице, используем директиву @include. Например, мы хотим применить его к заголовку h1. Получается следующая конструкция: h1 { @include: largeFont; }

Все свойства из миксина будут присвоены элементу h1.

Препроцессор Less

Синтаксис Sass напоминает о программировании. Если вы ищете вариант, который больше подходит изучающим CSS для начинающих, обратите внимание на Less. Он был создан в 2009 году. Главная особенность - поддержка нативного так что незнакомым с программированием верстальщикам его будет проще освоить.

Переменные объявляются с помощью символа @. Например: @fontSize: 14px;. Вложенность работает по тем же принципам, что и в Sass. Миксины объявляются следующим образом: .largeFont() { font-family: ‘Times New Roman’; font-size: 64px; line-height: 80px; font-weight: bold; }. Для подключения не нужно использовать директивы препроцессоров - просто добавьте свежесозданный миксин в свойства выбранного элемента. Например: h1 { .largeFont; }.

Stylus

Еще один препроцессор. Создан в 2011 году тем же автором, что подарил миру Jade, Express и другие полезные продукты.

Переменные можно объявлять двумя способами - явно или неявно. Например: font = ‘Times New Roman’; - это неявный вариант. А вот $font = ‘Times New Roman’ - явный. Миксины объявляются и подключаются неявно. Синтаксис таков: redColor() color red. Теперь можем добавить его элементу, например: h1 redColor();.

На первый взгляд Stylus может показаться непонятным. Где «родные» скобки и точки с запятой? Но стоит только в него погрузиться, как все становится намного более ясным. Однако помните, что длительная разработка с этим препроцессором может «отучить» вас использовать классический синтаксис CSS. Это иногда вызывает проблемы при необходимости работать с «чистыми» стилями.

Какой препроцессор выбрать?

На самом деле это… не имеет значения. Все варианты предоставляют примерно одинаковые возможности, просто синтаксис у каждого разный. Рекомендуем действовать следующим образом:

• если вы - программист и хотите работать со стилями как с кодом, используйте Sass;
• если вы - верстальщик и хотите работать со стилями как с обычной версткой, обратите внимание на Less;
• если вы любите минимализм, воспользуйтесь Stylus.

Для всех вариантов доступно огромное количество интересных библиотек, способных еще сильнее упростить разработку. Пользователям Sass рекомендуется обратить внимание на Compass - мощный инструмент с множеством встроенных возможностей. Например, после его установки вам уже никогда не придется беспокоиться о вендорных префиксах. Упрощается работа с сетками. Имеются утилиты для работы с цветами, спрайтами. Доступен ряд уже объявленных миксинов. Уделите этому средству пару дней - тем самым вы сэкономите немало сил и времени в будущем.

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

Воплощение дизайнерского макета невозможно без использования 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 фреймворками и сборщиками проектов.