Препроцессоры CSS – незаменимый инструмент современного веб-разработчика. Как можно сделать это более эффективно

Процесс написания 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

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

Цель препроцессоров : предоставление удобных синтаксических конструкций для веб-разработчика, чтобы упростить и ускорить разработку и поддержку стилей в проектах.

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

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

Среди наиболее популярных препроцессоров выделяют Less, Sass (Scss), Stylus . Также более менее заметными инструментами в данной области являются Closure Stylesheets, CSS Crush, они менее популярны на данный момент, но все таки ими пользуются некоторые разработчики. Попробуем разобраться в возможностях и особенностях Less, Sass (Scss), Stylus.

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

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

Для более продвинутых пользователей есть специальные сборщики проектов.

Less – наиболее популярный и часто используемый препроцессор. Разработан на основе JavaScript, включает базовые возможности препроцессоров, но не предоставляет условных конструкций и циклов в привычном для нас понимании. Благодаря своей простоте и лаконичности имеется стандартный для CSS синтаксис и возможность расширения функционала за счёт функционирования плагинов.

LESS предоставляет для CSS динамические возможности: переменные, примешивания (Mixins), операции и функции. Документация очень дружелюбная для разработчика, а синтаксис очень схож с чистым CSS. Популярные фреймворки, например, Twitter Bootstrap, активно используют динамические функции LESS. Однако LESS дает возможность повторно использовать классы в качестве примешиваний в любом месте таблицы стилей.

Другой мощный и популярный препроцессор – Sass . Вокруг данного инструмента образовалось огромное сообщество разработчиков. Он основан в 2007 году как модуль для HAML и написан на Ruby (предоставляет порт на C++). Имеет широкий ассортимент функций, если сравнивать с Less. Препроцессор расширяет свою функциональность за счёт библиотеки Compass, которая дает возможность выйти за рамки CSS и работать более масштабно. Предоставляет два вида синтаксиса: Sass (Syntactically Awesome Style Sheets) более простой синтаксис CSS, в основе которого идентация. Его считают более устаревшей версией. Scss (Sassy CSS) в основе которого стандартный для CSS синтаксис.

– довольно молодой, но уже перспективный CSS-препроцессор. Разработан еще в 2010 году. Многие считают его удобным и расширяемым препроцессор, и более гибким чем Sass. Разработан на JavaScript. Есть поддержка многих вариантов синтаксиса от подобного CSS до более простого и легкого.

Полезные инструменты для разработчика:

CodeKit : делает компиляцию Sass, LESS и Stylus файлов, а затем автоматически перегружает ваш веб-браузер, после обновления файлов. В том числе оптимизирует изображения проекта для того, чтобы повысить производительность системы. Технология платна, но есть и триальная версия для работы.
LiveReload : делает проверку изменений в файлах, потом обрабатывает их и автоматически перезагружает веб-браузер. Версия работает для Mac и Windows.
Scout : Работает с Sass и Compass в среде Ruby. Работает для Mac и Windows.
SimpLESS : обычный и простой LESS CSS компилятор для Mac и Windows.

Для того, чтобы выбрать по.дходящий препроцессор для своей работы, попробуйте воспользоваться несколькими. А по результатам теста, Вам будет намного легче сделать свой выбор. А также не забывайте о том, что при освоении препроцессора, Вы не изучаете новый язык, а только лишь изучаете новый синтаксис и возможности. Компания ™ желает Вам приятной работы в мире CSS!

2545 раз(а) 1 Сегодня просмотрено раз(а)

И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS , а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?

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

Компиляция LESS и VS Code

Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less . Как это работает?

Создаем файл стилей c расширением .less

После сохранения, автоматически сгенерируется .css файл в ту же папку.

Каждый раз при сохранении изменений, 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;
}
}

CSS .portfolio__item {
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 . Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.

Современный CSS - мощь, а в комбинации с препроцессорами - вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.

Зачем использовать Sass/SCSS вместо CSS?

Вложенность - SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).

Переменные - в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.

Улучшенные математические операции - можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .

Тригонометрия - SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.

Директивы @for , @while и выражение @if-else - можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь - в итоге на выходе будет обычный CSS.

Миксины (примеси) - можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.

Функции - можно создавать определения CSS в виде функций для многократного использования.

Препроцессор Sass

Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.

Синтаксис

SCSS особо не добавляет никаких новых возможностей CSS, кроме нового синтаксиса, часто сокращающего время написания кода.

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS - (.sass) S yntactically A wesome S tyle S heets.

SCSS - (.scss) Sass y C ascading S tyle S heets.

Расширения.sass и.scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

# Конвертация из Sass в SCSS $ sass-convert style.sass style.css # Конвертация из SCSS в Sass $ sass-convert style.scss style.sass

Sass - первая спецификация для SCSS с расширением файла.sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением.scss .

Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире (--), а в препроцессорах знаком доллара ($).

$number: 1; $color: #ff0000; $text: "tproger forever."; $text: "IT forever." !default; $nothing: null;

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

#container { content: $text; }

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

/* Вложенные правила */ #A { color: red; } #A #B { color: green; } #A #B #C p { color: blue; }

Те же вложенные элементы с помощью SCSS:

/* Вложенные правила */ #A { color: red; #B { color: green; #C p { color: blue; } } }

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

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

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд #p { color: black; a { font-weight: bold; &:hover { color: red; } } }

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

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

#p {color: black;} #p a {font-weight: bold;} #p a:hover {color: red;}

В итоге амперсанд был компилирован в название родительского элемента a (a:hover).

Миксины (они же примеси)

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд (&), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов(-webkit- или -moz-).

Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:

@mixin border-radius($radius) { // Префиксы для: -webkit-border-radius: $radius; // Chrome и Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radius; // Internet Explorer -o-border-radius: $radius; // Opera border-radius: $radius; // Стандартный CSS } // Пример использования миксина border-radius после его создания.box { @include border-radius(10px); }

Арифметические операции

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em).

Сложение и вычитание p { font-size: 10px + 2em; // ОШИБКА! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px }

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

Пример вычитания:

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел (5*6 == 5 * 6).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

P { width: 10px * 10px; // ОШИБКА! width: 10px * 10; // 100px width: 1px * 5 + 5px; // 10px width: 5 * (5px + 5px); // 50px width: 5px + (10px / 2) * 3; // 20px }

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

/* краткая форма записи свойств */ font: italic bold .8em/1.2 Arial, sans-serif; /* стандартная форма записи свойств */ font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: Arial, sans-serif;

Есть три помощника, которые намекнут на возможность деления:

Значение (или любая его часть) хранится в переменной или возвращается функцией.

Значения заключены в круглые скобки.

Значение используется как часть другого арифметического выражения.

$var1: 20; $var2: 4; p { top: 16px / 24px; // Отображается без изменений в стандартном CSS top: (20px / 5px); // Производится деление (но только при использовании скобок) top: #{$var1} / #{$var2}; // Выводится как обычный CSS-код, деление не выполняется top: $var1 / $var2; // Деление выполняется top: random(4) / 5; // Деление выполняется (если использовать в паре с функцией) top: 2px / 4px + 3px; // Деление выполняется, если добавлена ещё одно арифметическое действие }

Результат компиляции в CSS:

P { top: 16px / 24px; top: 4; top: 20 / 4; top: 5; top: 0.6; top: 3.5px; }

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

@mixin zebra() { @for $i from 1 through 7 { @if ($i % 2 == 1) { .stripe-#{$i} { background-color: black; color: white; } } } } * { @include zebra(); text-align: center; }

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

zebra zebra zebra zebra zebra zebra zebra

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .

Ниже показано, как работают директивы @if и @else , вложенные в миксин.

@mixin spacing($padding, $margin) { @if ($padding > $margin) { padding: $padding; } @else { padding: $margin; } } .container { @include spacing(10px, 20px); }

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Container { padding: 20px; }

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

Описание логических операторов

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

@mixin button-color ($height, $width) { @if (($height < $width) and ($width >= 35px)) { background-color: blue; } @else { background-color: green; } } .button { @include button-color(20px, 30px) }

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

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

P { font: 50px Ari + "al"; // Компилируется в 50px Arial }

Пример ниже демонстрирует, как делать не надо.

P { font: "50px" + Arial; // ОШИБКА! }

Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.

P:after { content: "Верните Линуса " + Торвальдса!; // ОШИБКА! }

P:after { content: "Верните Линуса " + "Торвальдса!"; // обратите внимание на "Торвальдса!" }

Пример сложения нескольких строк:

P:after { content: "Удел " + "человечества " + "-" + "итерация."; }

Сложение строк и чисел:

P:after { content: "Рекурсия " + 2013 + " удел небожителей"; }

Обратите внимание Свойство content работает только с псевдоселекторами:before и:after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции (fucntion()) и директивы (@directive). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if()

if() - это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

/* Использование функции if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;

@if

@if - это директива, использующаяся для разветвления на основе условия.

/* Использование директивы @if */ p { @if 1 + 1 == 2 { border: 1px solid; } @if 7 < 5 { border: 2px dotted; } @if null { border: 3px double; } }

Результат компиляции:

P { border: 1px solid; }

Ниже показано комбо-разветвление с добавлением директивы @else .

/* Создание переменной $type */ $type: river; /* Окрашивание контейнеров в синий в случае, если значение для переменной $type - river */ div { @if $type == river { color: blue; } } /* Условные цвета для текста в теге

*/ p { @if $type == tree { color: green; } @else if $type == river { color: blue; } @else if $type == dirt { color: brown; } }

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

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

/* Проверка на наличие родительского элемента */ @mixin does-parent-exist { @if & { /* Применение голубого цвета родительскому элементу, если он существует */ &:hover { color: blue; } } @else { /* Родительский элемент отсутствует, применение голубого цвета к ссылкам */ a { color: blue; } } }

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

@for $i from 1 through 5 { .definition-#{$i} { width: 10px * $i; } }

Результат компиляции в CSS:

Definition-1 { width: 10px; } .definition-2 { width: 20px; } .definition-3 { width: 30px; } .definition-4 { width: 40px; } .definition-5 { width: 50px; }

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

@each $animal in platypus, lion, sheep, dove { .#{$animal}-icon { background-image: url("/images/#{$animal}.png") } }

Результат компиляции в CSS:

Platypus-icon { background-image: url("/images/platypus.png"); } .lion-icon { background-image: url("/images/lion.png"); } .sheep-icon { background-image: url("/images/sheep.png"); } .dove-icon { background-image: url("/images/dove.png"); }

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

$index: 5; @while $index > 0 { .element-#{$index} { width: 10px * $index; } $index: $index - 1; }

Результат компиляции:

Element-5 { width: 50px; } .element-4 { width: 40px; } .element-3 { width: 30px; } .element-2 { width: 20px; } .element-1 { width: 10px; }

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

@function three-hundred-px() { @return 300px; } .name { width: three-hundred-px(); border: 1px solid gray; display: block; position: absolute; }

После применения класса.name ширина элемента будет равна 300 пикселям.

Hello.

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

@function double($width) { @return $width * 2; }

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера . Мы, кстати, уже об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.

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

Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

@function PI() { @return 3.14159265359; }

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

@function pow ($number, $exp) { $value: 1; @if $exp > 0 { @for $i from 1 through $exp { $value: $value * $number; } } @else if $exp < 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Использование функции rad() :

@function rad ($angle) { $unit: unit ($angle); $unitless: $angle / ($angle *0 + 1); //Если значение angle (угла) указано в градусах ("deg"), нужно конвертировать его в радианы. @if $unit == deg { $unitless: $unitless / 180 * PI(); } @return $unitless; }

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() ..

Статья на NetTuts+, написанная Johnathan Croom в 2012 году.

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

В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров - Sass , LESS и Stylus .

Введение

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

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

Синтаксис

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

Sass & LESS

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

.scss

, LESS - расширение

.less

Вид обычного файла в синтаксисе Sass или LESS представлен ниже:

/* style.scss или style.less */ h1 { color : #0982c1 ; }

Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.

Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.

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

Синтаксис Sass (старая версия ) выглядит следующим образом:

/* style.sass */ h1 color : 0982c1 Stylus

Для своих файлов этот препроцессор использует расширение

.styl

. Синтаксис препроцессора Stylus более многословный (прим. переводчика: автор что-то напутал здесь ) в нем применяется за основу стандартный синтаксис CSS, но допускается применение различного сочетания скобок, двоеточий и точек с запятой.

Примеры синтаксиса 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 переменная объявляется с помощью символа

, при этом имя переменной и ее значение отделяются друг от друга двоеточием так, как это делается в CSS: $ mainColor : #0982c1 ; $ siteWidth : 1024px ; $ borderStyle : dotted ; body { color : $ mainColor ; border : 1px $ borderStyle $ mainColor ; max-width : $ siteWidth ; } LESS

Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ

: @mainColor : #0982c1 ; @siteWidth : 1024px ; @borderStyle : dotted ; body { color : @ mainColor ; border : 1px @ borderStyle @ mainColor ; max-width : @ siteWidth ; } Stylus

Переменные в 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 поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя - занятие утомительное.

Например, так:

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

является ссылкой (сокращением ) на селектор элемента-родителя. Sass, LESS & Stylus

Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:

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)

mixins

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

Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри 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-селектора с помощью директивы

@extend

. Sass & Stylus .block { margin : 10px 5px ; padding : 2px ; } p { @extend .block; border : 1px solid #EEE ; } ul , ol { @extend .block; /* Наследовать свойства у селектора класса.block */ Скомпилированный CSS .block , p , ul , ol { margin : 10px 5px ; padding : 2px ; } p { border : 1px solid #EEE ; } ul , ol { color : #333 ; text-transform : uppercase ; } LESS

Препроцессор 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-сообществе к импортированию стилей с помощью директивы

@import

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

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

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

Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы

1	@import "file.css"

внутри него компиляции последнего не происходит. А вот миксины или переменные импортируются и используются в стилевом файле, как положено. Технология импортирования очень удобная, так как она позволяет создавать множество отдельных файлов для правильной организации проекта. /* file.{type} */ body { background : #EEE ; } @import "reset.css" ; @import "file.{type}" ; p { background : #0982C1 ; } Скомпилированный CSS @import "reset.css" ; body { background : #EEE ; } p { background : #0982C1 ; } Функции работы с цветом

“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при

hover

и многое другое. Sass lighten ($ color , 10 %); darken ($ color , 10 %); saturate ($ color , 10 %); desaturate ($ color , 10 %); grayscale ($ color ); /* возвращает шкалу полутонов цвета $color */ complement ($ color ); /* returns complement color of $color */ invert ($ color ); /* возвращает инвертированный цвет от $color */ mix ($ color1 , $ color2 , 50 %);

Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation .

“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример - объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета

darken

: $ color : #0982C1 ; h1 { background : $ color ; border : 3px solid darken ($ color , 50% ); } LESS lighten (@color , 10% ); /* возвращает цвет на 10% светлее чем $color */ darken (@color , 10% ); /* возвращает цвет на 10% темнее чем $color */ saturate (@color , 10% ); /* возвращает цвет на 10% более насыщенный чем $color */ /* возвращает цвет на 10% менее насыщенный чем $color */ spin (@color , 10 ); /* возвращает цвет, смещенный на 10 градусов вправо относительно цвета @color */ spin (@color , -10 ); /* возвращает цвет, смещенный на 10 градусов влево относительно цвета @color */ mix (@color1 , @ color2 ); /* возвращает результат смешивания цвета $color1 с цветом $color2 */

Список функций препроцессора 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 по имени

calc()

, которая также позволяет выполнять внутри CSS-кода простые арифметические операции. Sass, LESS & Stylus body { margin : (14px / 2 ); top : 50px + 100px ; right : 100px - 50px ; left : 10 * 10 ; } Практические примеры

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

Браузерные префиксы

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

Например, создадим для всех трех препроцессоров миксин скругления углов блока:

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 span { font-size : 32pt ; color : #0982c1 ; text-shadow : 1px 1px 0px #097bb7 , 2px 2px 0px #0875ae , 3px 3px 0px #086fa4 , 4px 4px 0px #07689a , 4px 4px 2px #000 ; } Колонки

Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями 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-кода находиться ошибка (и все счастливы ).

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