Абсолютно все опытные верстальщики используют препроцессоры. Исключений нет. Если вы хотите добиться успеха в этой деятельности, не забывайте об этих программах. С первого взгляда они могут вызвать у новичка тихий ужас – это уже слишком похоже на программирование! На самом деле можно разобраться со всеми возможностями препроцессоров 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 % светлее.
В Sass много встроенных функций. Рекомендуем как минимум ознакомиться с ними, а лучше – выучить.
Вложенность
Раньше для обозначения вложенности приходилось использовать длинные и неудобные конструкции. Представим, что у нас есть div, в котором лежит p, а в нём, в свою очередь, расположен span. Для div нам нужно задать цвет шрифта red, для p – yellow, для span – pink. В обычном CSS это делалось бы следующим образом:
div {
color: red;
}
div p {
color: yellow;
}
div p span {
color: pink;
}
С помощью препроцессора CSS все делается проще и компактнее:
div {
color: red;
p {
color: yellow;
.span {
color: pink;
}
}
}
Элементы буквально «вкладываются» один в другой.
Директивы препроцессора
С помощью директивы @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 году. Главная особенность – поддержка нативного синтаксиса CSS, так что незнакомым с программированием верстальщикам его будет проще освоить.
Переменные объявляются с помощью символа @. Например: @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 – мощный инструмент с множеством встроенных возможностей. Например, после его установки вам уже никогда не придется беспокоиться о вендорных префиксах. Упрощается работа с сетками. Имеются утилиты для работы с цветами, спрайтами. Доступен ряд уже объявленных миксинов. Уделите этому средству пару дней – тем самым вы сэкономите немало сил и времени в будущем.
