Препроцессоры CSS – незаменимый инструмент современного веб-разработчика. Как можно сделать это более эффективно
Появились вопросы?
Воплощение дизайнерского макета невозможно без использования 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 фреймворками и сборщиками проектов.
Процесс написания HTML и CSS может оказаться несколько изнурительным и требовать множества одних и тех же задач снова и снова. Таких задач, как закрытие тегов в HTML или монотонный просмотр шестнадцатеричных значений цвета в CSS.
Такие разные задачи, как правило, небольшие, чуть-чуть снижают эффективность. К счастью, эти и несколько других неэффективных задач были признаны и вызов им бросили препроцессоры.
Препроцессор - это программа, которая берёт один тип данных и преобразует его в другой тип данных. В случае HTML и CSS, одни из наиболее популярных языков препроцессора - это Haml и Sass . Haml преобразуется в HTML, а Sass преобразуется в CSS.
После своего становления, при решении некоторых наиболее распространённых проблем, Haml и Sass нашли много дополнительных способов для расширения возможностей HTML и CSS. Не только путём удаления неэффективных задач, но также созданием методов, делающих разработку сайтов проще и логичнее. Популярность препроцессорам также принесли различные фреймворки, которые их поддерживают; одним из наиболее популярных является Compass.
HamlCodeKit также поддерживает другие препроцессоры, которые тоже могут вам пригодиться.
ДоктайпПервая часть при написании документа на 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 $("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
И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS , а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?
Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS , придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS .
Компиляция LESS и VS CodeВсе что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less . Как это работает?
Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS , им нужен CSS код.
Переменные LESSНаиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"
Главная фишка - это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS . Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.
@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;
Теперь пишем обычный код, как мы это делали в CSS , но вместо значений подставляем переменные.
LESS div {padding: 0;
color: @black;
}
После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.
CSS div {padding: 0;
font-family: Roboto, sans-serif;
color: #000;
} Миксины (mixin) в LESS
Миксины полезны для повторного использования набора свойств – рамок, кнопок, заголовков. Сгруппированный набор свойств, может применяться к разным селекторам.
На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.
Button_font {
text-transform: uppercase;
font-size: 18px;
}
Примешиваем миксин в свойства селектора кнопки.
Portfolio__button {
padding: 15px 80px;
color: #344258;
.button_font;
}
На выходе получаем:
Portfolio__button {
padding: 15px 80px;
color: #344258;
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
}
Вместо дублирования названия селектора, используем символ амперсанд.
Portfolio__item {
position: relative;
background-color: #3c3c3c;
}
&:hover {
background-color: #ccc;
}
}
position: relative;
background-color: #3c3c3c;
}
.portfolio__item:hover {
background-color: #ccc;
} Медиа-запросы в LESS
Можно записывать медиа-запросы прямо внутри селектора.
LESS .header__title {color: #344258;
font-size: 40px;
padding: 0 20px;
@media only screen and (max-width: 320px){
font-size: 22px;
}
} CSS .header__title {
color: #344258;
font-size: 40px;
font-family: "DIN Pro", sans-serif;
padding: 0 20px;
}
@media only screen and (max-width: 320px) {
.header__title {
font-size: 22px;
}
} Заключение
Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS . Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.
Статья на NetTuts+, написанная Johnathan Croom в 2012 году.
Основная цель статьи - показать преимущество использования любого из трех описанных в ней препроцессоров Sass, LESS и Stylus. Обзор прекрасно подойдет для новичков, которые только открывают для себя эту грань веб-дизайна.
В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров - Sass , LESS и Stylus .
ВведениеПрепроцессоры CSS были созданы с одной единственной целью - добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер ) не был.
Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.
СинтаксисНаиболее важной частью при написании кода в любом препроцессоре CSS является его синтаксис. В счастью для нас, синтаксис всех трех препроцессоров, которые мы будем рассматривать, имеют CSS-подобный вид.
Sass & LESSОба препроцессора Sass и LESS имеют стандартный CSS-синтаксис. Это делает задачу конвертирования уже существующего CSS-кода в синтаксис любого из этих препроцессоров простой и быстрой. Sass использует для своих файлов расширение
| 1 | .scss |
| 1 | .less |
Вид обычного файла в синтаксисе Sass или LESS представлен ниже:
/* style.scss или style.less */ h1 { color : #0982c1 ; }Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.
Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.
Несмотря на то, что такой синтаксис все еще можно применять на практике, он является устаревшим и мы не будем использовать его в наших примерах.
Синтаксис Sass (старая версия ) выглядит следующим образом:
/* style.sass */ h1 color : 0982c1 StylusДля своих файлов этот препроцессор использует расширение
| 1 | .styl |
Примеры синтаксиса Stylus:
/* CSS-подобный синтаксис */ h1 { color : #0982C1 ; } /* опущены фигурные скобки */ h1 color : #0982C1 ; /* опущены фигурные скобки, двоеточия и точки с запятой */ h1 color #0982C1Все варианты синтаксиса, показанные выше, являются валидными и в результате компиляции получается правильный CSS-код. Например, такой код скомпилируется в стандартный CSS без ошибок:
h1 { color #0982c1 } h2 font-size : 1 .2em ПеременныеВ препроцессорах переменные объявляются и используются внутри файлов стилей CSS. Переменные могут принимать любое значение, допустимое в CSS (цвет, число или текст) и может ссылаться из любого места CSS-документа.
SassВ препроцессоре Sass переменная объявляется с помощью символа
| 1 | $ |
Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ
| 1 | @ |
Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ
, но при вызове этой переменной в коде подстановки значения переменной не происходит.Другими словами, не выполняется такая операция:
mainColor = #0982c1 siteWidth = 1024px $ borderStyle = dotted body color mainColor border 1px $ borderStyle mainColor max-width siteWidth Скомпилированный CSSКаждый из представленных в виде примера файлов компилируется в точно такой же CSS-код. Вы можете включить воображение, чтобы представить, насколько полезными могут быть переменные.
Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.
Ниже представлен CSS-код после выполнения компиляции:
body { color : #0982c1 ; border : 1px dotted #0982c1 ; max-width : 1024px ; } Вложенность (nesting)Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя - занятие утомительное.
Например, так:
Вместо этого, используя возможности препроцессора, мы можем поместить все дочерние селекторы внутри скобок элемента-родителя. Кроме того, символ
| 1 | & |
Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:
section { margin : 10px ; nav { height : 25px ; a { color : #0982C1 ; &:hover { text-decoration : underline ; } } } } Скомпилированный CSSНиже показан скомпилированный в CSS результат кода, представленного выше. Сравните с тем кодом, который мы писали в самом начале - абсолютно одинаково. Но какое удобство при использовании преимуществ препроцессора!
section { margin : 10px ; } section nav { height : 25px ; } section nav a { color : #0982C1 ; } section nav a :hover { text-decoration : underline ; } Подмешивания (mixins)| 1 | mixins |
Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри CSS-селектора, происходит распознавание аргументов этого миксина, затем его стили применяются к селектору, который его вызвал.
Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.
Sass /* Sass mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ @mixin error ($ borderWidth : 2px ) { border : $ borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; @include error(); } .login-error { left : 12px ; position : absolute ; top : 20px ; @include error(5px); } LESS /* LESS mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ .error (@borderWidth : 2px ) { border : @ borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; .error(); /* Подключается миксин по имени error */ } .login-error { left : 12px ; position : absolute ; top : 20px ; .error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */ } Style /* Stylus mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ error (borderWidth = 2px ) { border : borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; error(); /* Подключается миксин по имени error */ } .login-error { left : 12px ; position : absolute ; top : 20px ; error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */ } Скомпилированный CSSРезультатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:
.generic-error { padding : 20px ; margin : 4px ; border : 2px solid #f00 ; color : #f00 ; } .login-error { left : 12px ; position : absolute ; top : 20px ; border : 5px solid #f00 ; color : #f00 ; } Наследование (inheritance)При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:
p , ul , ol { /* какие-то стили здесь */ }Все работает прекрасно. Но если потребуется написать стили отдельно для любого из этих селекторов, нужно будет создавать отдельные правила для каждого из них. И сразу же код таблиц стилей становиться неряшливым и трудно поддерживаемым.
В противоположность этому применяются наследование. Наследование - это возможность для одних CSS-селекторов наследовать свойства у другого селектора.
Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы
| 1 | @extend |
Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.
Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.
Вот как может выглядеть LESS-код с наследованием:
.block { margin : 10px 5px ; padding : 2px ; } p { .block; border : 1px solid #EEE ; } ul , ol { .block; /* Наследование свойств у селектора класса.block */ color : #333 ; text-transform : uppercase ; } Скомпилированный CSS .block { margin : 10px 5px ; padding : 2px ; } p { margin : 10px 5px ; padding : 2px ; border : 1px solid #EEE ; } ul , ol { margin : 10px 5px ; padding : 2px ; color : #333 ; text-transform : uppercase ; }Как хорошо видно из кода, стили класса
. ИмпортированиеВ CSS-сообществе к импортированию стилей с помощью директивы
| 1 | @import |
В любом из трех препроцессоров импортирование одного файла внутрь другого фактически приводит к вставке кода одного файла в другой при компиляции, в результате которой получается один CSS-файл.
Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.
Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы
| 1 | @import "file.css" |
“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при
| 1 | hover |
Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation .
“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример - объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета
| 1 | darken |
Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation .
Ниже показан пример того, как можно применять “цветовые” функции в LESS:
@color : #0982C1 ; h1 { background : @ color ; border : 3px solid darken (@ color , 50% ); } Stylus lighten (@color , 10% ); /* возвращает цвет на 10% светлее чем $color */ darken (@color , 10% ); /* возвращает цвет на 10% темнее чем $color */ saturate (@color , 10% ); /* возвращает цвет на 10% более насыщенный чем $color */ desaturate (@color , 10% ); /* возвращает цвет на 10% менее насыщенный чем $color */Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation .
И пример использования “цветовой” функции в Stylus:
color = #0982C1 h1 background color border 3px solid darken (color , 50 %) Арифметические операцииБлагодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.
Прим. переводчика: стоит упомянуть о функции из CSS3 по имени
| 1 | calc() |
Вот мы и рассмотрели основные моменты того, что и как умеют делать все три препроцессора. Однако мы еще ни разу не коснулись момента практического применения этих возможностей. Ниже показан список реальных веб-приложений, в которых используются препроцессоры, заметно улучшая при этом весь код.
Браузерные префиксыОдним из наиболее ярких примеров преимущества использования препроцессоров является написание с их помощью свойств с браузерными префиксами. Один раз создав миксин с поддержкой браузерных префиксов, мы избавляем себя от рутинной работы.
Например, создадим для всех трех препроцессоров миксин скругления углов блока:
Sass @mixin border-radius ($ values ) { -webkit-border-radius : $ values ; -moz-border-radius : $ values ; border-radius : $ values ; } div { @include border-radius(10px); } LESS .border-radius (@values ) { -webkit-border-radius : @ values ; -moz-border-radius : @ values ; border-radius : @ values ; } div { .border-radius(10px); } Stylus border-radius (values ) { -webkit-border-radius : values ; -moz-border-radius : values ; border-radius : values ; } div { border-radius(10px); } Скомпилированный CSS div { -webkit-border-radius : 10px ; -moz-border-radius : 10px ; border-radius : 10px ; } Трехмерный текстСоздание эффекта трехмерности для текста с помощью CSS-свойства
| 1 | text-shadow |
Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:
Sass @mixin text3d ($ color ) { color : $ color ; text-shadow : 1px 1px 0px darken ($ color , 5% ), 2px 2px 0px darken ($ color , 10% ), 3px 3px 0px darken ($ color , 15% ), 4px 4px 0px darken ($ color , 20% ), 4px 4px 2px #000 ; } h1 { font-size : 32pt ; @include text3d(#0982c1); } LESS .text3d (@color ) { color : @ color ; text-shadow : 1px 1px 0px darken (@ color , 5% ), 2px 2px 0px darken (@ color , 10% ), 3px 3px 0px darken (@ color , 15% ), 4px 4px 0px darken (@ color , 20% ), 4px 4px 2px #000 ; } span { font-size : 32pt ; .text3d(#0982c1); } Stylus text3d (color ) color : color text-shadow : 1px 1px 0px darken (color , 5 %), 2px 2px 0px darken (color , 10 %), 3px 3px 0px darken (color , 15 %), 4px 4px 0px darken (color , 20 %), 4px 4px 2px #000 span font-size : 32pt text3d (#0982c1 )В примере для Stylus я выбрал вариант написания свойства
| 1 | text-shadow |
Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости ) простой и быстрой:
Sass $ siteWidth : 1024px ; $ gutterWidth : 20px ; $ sidebarWidth : 300px ; body { margin : 0 auto ; width : $ siteWidth ; } .content { float : left ; width : $ siteWidth - ($ sidebarWidth +$ gutterWidth ); } .sidebar { float : left ; margin-left : $ gutterWidth ; width : $ sidebarWidth ; } LESS @siteWidth : 1024px ; @gutterWidth : 20px ; @sidebarWidth : 300px ; body { margin : 0 auto ; width : @ siteWidth ; } .content { float : left ; width : @ siteWidth - (@ sidebarWidth +@ gutterWidth ); } .sidebar { float : left ; margin-left : @ gutterWidth ; width : @ sidebarWidth ; } Stylus siteWidth = 1024px ; gutterWidth = 20px ; sidebarWidth = 300px ; body { margin : 0 auto ; width : siteWidth ; } .content { float : left ; width : siteWidth - (sidebarWidth + gutterWidth ); } .sidebar { float : left ; margin-left : gutterWidth ; width : sidebarWidth ; } Скомпилированный CSS body { margin : 0 auto ; width : 1024px ; } .content { float : left ; width : 704px ; } .sidebar { float : left ; margin-left : 20px ; width : 300px ; } Некоторые уловки препроцессоровСуществует несколько хитростей при работе с CSS-препроцессорами. В этой статье я расскажу только о некоторой части из них. Но если эта тема вас заинтересовала, я рекомендую вам внимательно прочитать официальную документацию или же, что еще лучше, просто начните пользоваться препроцессором каждый день в процессе кодинга.
Сообщение об ошибкахЕсли вы уже пишите код на CSS достаточно давно, то наверняка сталкивались с ситуацией, когда внутри кода закралась ошибка, которую вы никак не можете найти. Если вы попадали в точно такую же ситуацию, то могу вас обрадовать - существует способ решить такую задачу.
CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы ).
Если вас заинтересовала подобная возможность во всех трех препроцессорах, то в этой статье подробно описано, как выполнить данную настройку.
26.07.2017
5 Лучших CSS препроцессоров 2017 года, которые ускорят ваш рабочий процесс.
CSS препроцессоры разработаны специально для того, чтобы сделать работу CSS программистов более увлекательной. Они позволяют писать легко редактируемыый и надежный код с возможностью многократного использования.
Иными словами, CSS препроцессор - это дополнение к CSS с новыми функциями: переменными, расширениями, импортом и так далее.
В той статье я расскажу о лучших 5 CSS препроцессорах 2017 года.
01. SassSASS – это самый популярный препроцессор с огромным сообществом и мощным функционалом. Он работает только в совокупности с Ruby и очень прост в изучении. Большинство front-end фреймворков, таких как Bootstrap, Foundation и materialize, построены с использованием SASS.
SASS имеет два синтаксиса:
- .sass
- .scss
Stylus – еще один отличный препроцессор для динамичного генерирования CSS. Если вы хотите опустить фигурные скобки, запятые и точки с запятой, то он может стать для вас лучшим выбором. Stylus работает на Node.js и очень прост в установке и использовании. В нем есть множество кастомных функций, например, saturation(). Вы также можете использовать все функции, предоставляемые другими лидирующими компиляторами.
03. Less
Less, который также известен как Less.js или Less CSS, – еще один лидирующий CSS препроцессор. Это отличный выбор, если вам нужны такие стандартные функции как переменные, вложенные стили и так далее. Эта Javascript библиотека была изначально написана на Ruby.
- Читайте также:
Stylecow – препроцессор, написанный на Node, который можно установить с помощью npm. У него мощный API, с помощью которого можно легко создавать плагины.
05. CSS-Crush
Препроцессор, построенный на PHP, который станет отличным вариантом для PHP-программистов, потому что он работает на многих платформах. CSS-Crush обладает всеми обычными функциями препроцессора (переменные, вложенные стили и т.д.)
ЗаключениеЕсли вы ищете лучший CSS препроцессор, то вы найдете великое множество различных вариантов в сети. На мой взгляд, наилучшие варианты для новичков – это SASS и Stylus.