Что такое html препроцессоры

За что ты послал нам препроцессоры? Чем мы тебя прогневали?

Что такое препроцессоры CSS и зачем они нужны.

В наших проектах в Коде мы используем простой CSS-код. Он компактный и понятный. Но у нас маленькие проекты.

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

Что такое препроцессоры

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

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

И вот у всех этих элементов сейчас стоит параметр border-radius: 7px, то есть скругление по углам — семь пикселей. И вдруг приходит дизайнер и говорит: «Всё пропало, ставь скругление 8 пикселей!» Вы терпеливо заходите в CSS-файл и в 30 местах меняете 7px на 8px.

Приходит дизайнер и говорит: «Миша, всё ерунда, давай по новой. Теперь 6 пикселей». Можно запустить в дизайнера стулом, а можно использовать препроцессор.

С препроцессором у вас 30 кнопок, в которых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдельном месте документа будет один раз написано:

$defaultBorderRadius: 7px;

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

Какие бывают препроцессоры CSS

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

Любопытно, что у Sass есть два синтаксиса:

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

Stylus и другие. Есть и другие препроцессоры — например, тот же Stylus. Принципиально он делает то же самое, но использует другой синтаксис, более лаконичный и простой.

Какой выбрать?

По сути все они делают одно и то же: упрощают работу с CSS-кодом, поэтому это вопрос вкуса и привычек. Если давать общие рекомендации, мы бы сделали так:

Когда использовать препроцессоры

Если у вас CSS-код занимает не больше одной-двух страниц, нет смысла использовать препроцессоры: настройка и описание кода займёт больше времени, чем сразу написать то, что нужно. А вот если у вас большой сайт с разным дизайном на странице или очень сложная CSS-вёрстка, то тут уже пригодятся препроцессоры.

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

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

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

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

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

@mixin good-text <
font: <
family: Arial;
size: 20px;
weight: bold;
>
>
.page-text <
@include good-text;
color: #000000;
>
.menu-text <
@include good-text;
color: #ff0000;
>
.tip-text <
@include good-text;
color: #ffffff;
background-color: #000000;
>

.page-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #000000;
>
.menu-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
>
.tip-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
>

Чем больше однотипного кода используется в CSS-файле, тем проще из этого сделать один миксин.

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

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

Так как все CSS-препроцессоры делают примерно одно и то же, только немного разными способами, то сильные и слабые стороны у них будут одни и те же:

✅ Хорошо подходят для больших проектов.

✅ Сильно расширяют возможности обычного CSS.

✅ Упрощают работу с однотипным кодом.

✅ Проще вносить изменения и поддерживать код в актуальном состоянии.

✅ Сразу видна логическая структура CSS, легко разобраться в том, из чего состоит каждый элемент.

❌ Нет смысла использовать в маленьких проектах и простых страницах.

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

❌ Нужно изучать что-то кроме самого CSS.

❌ У каждого препроцессора свой синтаксис, и не получится быстро перейти от одного к другому.

С чего начать

Sass → почитайте sass-scss.ru, там есть всё, что нужно знать для работы с этим препроцессором. Документация настолько подробная, что её можно освоить вообще без опыта работы с таким инструментом.

LESS → Путеводитель для новичков по CSS-препроцессору Less. Просто, доходчиво и с кучей примеров для каждой команды.

Stylus → если знаете английский, почитайте официальный сайт проекта. Если не знаете — почитайте краткое руководство по использованию и опыт разработчиков Яндекс.Почты.

Источник

Что такое препроцессор HTML?

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

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

Препроцессор HAML: Haml означает язык разметки абстракции HTML, созданный Хэмптоном Кэтлином, и единственная цель его создания — сделать разметку красивой. По сути, это препроцессор на основе Ruby, и для его установки требуется Ruby. Препроцессор HTML также можно понять, поскольку это программа, которая помогает разработчику сгенерировать синтаксис HTML из синтаксиса препроцессора. Он добавит некоторые уникальные функции, которых нет в синтаксисе чистого HTML. Следовательно, Haml разработан, чтобы избежать написания встроенного кода для веб-документов, который сделает HTML более чистым, а также обеспечивает гибкость, позволяющую иметь некоторый динамический контент в HTML. Поскольку препроцессоры — это программы, они всегда обрабатываются на некоторых языках, поэтому Haml обрабатывается в HTML и Sass. Мы выполним следующие шаги, чтобы установить HAML:

Для установки HAML:

Для преобразования HAML в HTML:

Примечание. Команда должна выполняться в том же каталоге, где находится индексный файл.

Пример 1

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

Источник

Html препроцессор nunjucks

Что такое html препроцессор

HTML препроцессор — это скрипт, который преобразует определенный формат языка разметки в обычный HTML. Зачем же он нужен? Чем не устраивает обычный html? Основная причина — это удобно, это ускоряет процесс верстки сайта.

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

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

Основные преимущества использования HTML препроцессоров:

Список html препроцессоров:

Вот список из наиболее известных HTML препроцессоров:

Шаблонизатор nunjucks

По сути, Nunjucks — это мощный шаблонизатор для JavaScript. Его можно использовать как в браузере, на стороне клиента, так и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для верстки сайтов.

Почему именно Nunjucks?

Как пользоваться шаблонизатором html nunjucks (gulp nunjucks)

Для этого проще всего использовать сборщик проектов gulp и модуль gulp-nunjucks. Устанавливать их будем с помощью утилиты npm (для этого предварительно нужно установить Node.js себе на компьютер).

Заходим с консоли в папку с проектом и инициализируем npm:

В результате получим файл package.json, в котором описываются все зависимости и настройки.

Далее устанавливаем gulp и gulp-nunjucks:

Создаем файл gulpfile.js. В нем находятся наборы команд для gulp. Пример простой конфигурации для nunjucks:

Чтобы бы не устанавливать gulp глобально, открываем файл package.json, в раздел scripts добавляем строчку:

В итоге получаем такой файл package.json:

Это простой пример настройки gulp для демонстрации работы nunjucks. Более подробно, как работать с gulp, мы рассмотрим в следующих статьях.

Далее создадим в корне проекта папку src и dist. В src находится исходники nunjucks. Gulp будет отслеживать изменение в этом каталоге и сохранять готовые html файлы в папку dist.

Чтобы запустить gulp, в командной строке пишем:

Пример работы с nunjucks

И так, мы подготовили окружение, настроили gulp, и можем пробовать nunjucks в деле. Для примера, возьмем простой bootstrap шаблон, состоящий из 3-х страниц, написан на обычном html, и переделаем его на шаблонизаторе nunjucks.

Наследование шаблонов

Nunjucks дает возможность наследовать шаблоны. Другими словами, вы можете создавать страницы сайта по заранее созданным шаблонам. Наследование работает через конструкции block и extends.

Посмотрим на наш пример:

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

Создаем в каталоге src папку layouts. В ней создаем файл нашего основного шаблона default.html. Копируем туда все общее, что есть на всех страницах, а вместо изменяемой части пропишем конструкцию block:

И так, мы добавили <% block content %> <% endblock %>в то место, где подставляется основная информация страницы. Также добавили <% block aside %> <% endblock %>для вывода сайтбара, но между этими тегами вставили блок по умолчанию, так как на большинстве страницах он одинаковый.

В папке src создаем файл index.html, в нем наследуем наш базовый шаблон и в блоке content мы можем подставить содержимое страницы сайта:

В итоге получим:

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

Создаём все недостающие страницы и подставим актуальную информацию на всех страницах.

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

Включение одного шаблона в другой (nunjucks include)

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

Давайте на нашем сайте header, footer и sitebar вынесем в отдельные файлы. В папке src создадим каталог parts, в которой будем сохранять все различные части кода.

Создаем файлы header.html, footer.html и sidebar.html. С основного шаблоны вырезаем необходимые части, а в место них прописываем конструкцию include. В итоге файл default.html будет выглядеть так:

Так же, на странице контакты нам необходимо подключить файл sidebar.html, так как мы переопределяем на ней сайтбар:

Переменные (nunjucks Variables)

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

В nunjucks переменные задаются следующей конструкцией:

Вывод содержимого переменной:

Посмотрим на шаблон default.html. В нем title и заголовок страниц жестко прописаны в коде. Это нам не подходит, так как эти значения разные на всех страницах. Поэтому, на каждой странице заведем переменные title и pageName и добавим их в начале страниц:

В шаблоне выведем эти значения:

В итоге, у каждой страницы свой title и заголовок.

Nunjucks import

Конструкция import позволяет загружать шаблоны и получать доступ к его экспортированным значениям (переменным и миксинам).

Давайте еще посмотрим на наш сайт. В верхней части и в сайтбаре выводится контактная информация:

Ее также удобно сохранять в переменные. Но эти переменные касаются всего сайта, а не отдельных страниц. Поэтому, создадим файл, где будем сохранять глобальные переменные для всего сайта и импортируем его в основном шаблоне. Создаем папку data в src, в ней файл data.html. В самом начале файла default.html прописываем конструкцию import:

Теперь можно получить доступ ко всем значениям в data.html через переменную data.

В data.html добавим 2 переменные:

Теперь в файлах header.html и contact.html выводим эти переменные:

Условия (Nunjucks if)

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

Также есть возможность указать альтернативные условия с помощью конструкций elseif и else:

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

На каждой странице добавим еще по одной переменной:

Этими переменными мы задаем уникальное название (ярлык) для каждой страницы.

Далее, в основном шаблоне задаем условие для вывода навигационной цепочки:

Если переменная pageSlug не равна home, то мы выводим блок с контентом. Таким образом, мы выводим хлебные крошки на всех страницах, кроме главной.

Тернарный оператор (If Expression)

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

Если условие истинно, то выведется home, в противном случае default.

На нашем тестовом сайте в навигациях не определяется активная страница. Заходим в файл header.html, находим место где выводится меню и применим тернарный оператор:

Тоже самое делаем в файле sidebar.html:

Циклы

Циклы — это операция, при которой одно и то же действие выполняется несколько раз. В nunjucks так же есть конструкция для организации циклов:

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

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

На страницах, где необходимо выводить хлебные крошки, зададим массив с необходимыми элементами:

В основном шаблоне выведем элементы навигационной цепочки:

В цикле мы проверяем, если элемент массива последний, то выводим его как активный.

Так же, давайте выведем наше меню в цикле. Для этого в файле data.html создадим массив с элементами навигации:

Выведем меню в файле header.html:

Аналогично в файле sidebar.html:

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

Макросы (macro)

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

Теперь макрос с примера можно вызвать неограниченное количество раз:

В первом варианте мы передаем один параметр, а значение isAdmin задана по умолчанию, во втором варианте мы передаем два аргумента.

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

Выведем этот блок с помощью макроса. Создаем в папке src каталог macro. В нем файл macro.html, в котором будем хранить все наши макросы. Как и в случае с файлом переменных, импортируем его в основной шаблон:

Далее создаем наш макрос, назовем его ItemList, в который передается массив с необходимыми данными:

После этого вызываем макрос в нужных местах, передавая в него необходимые значения. Файл index.html:

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

Фильтры (Nunjucks filters)

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

На пример, фильтр abs возвращает абсолютное значение аргумента:

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

Пример использования фильтра посмотрим на нашем сайте. Ранее мы создали переменную phone и присвоили ей значение (123) 456-7890. Далее необходимо вывести телефон ссылкой в таком формате:

То есть, вырезать с переменной все лишние символы и оставить только числа. Для этого применим фильтр replace:

Выводим эту конструкцию в файлах header.html:

Выводы

Мы рассмотрели основные моменты использования шаблонизатора nunjucks. Для примеры создали небольшой сайт на этом препроцессоре. Готовый результат можно посмотреть в репозиторие. Для более подробного изучения можно воспользоваться официальной документацией по nunjucks.

Источник

Препроцессоры

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

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

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

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

Haml (HTML abstraction markup language, абстрактный язык разметки HTML) — это язык разметки с единственной целью — предоставить возможность писать красивую разметку. Являясь собственным языком разметки, код, написанный на Haml, позже преобразуется в HTML. Haml продвигает принцип «не повторяйся» и способствует хорошо структурированной разметке, создавая приятный опыт для тех, кто умеет её писать и читать.

Установка

Haml требует Ruby для компиляции в HTML, поэтому первый шаг для его использования — убедитесь, что установлен Ruby. К счастью для тех, кто работает на Mac OS X, система поставляется с предустановленным Ruby, а те, кто работают на Windows, могут перейти к установщику напрямую. После установки Ruby выполните следующую команду, используя Terminal или программу командной строки.

Слежение за файлом или папкой

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

Внутри приложения Rails зависимость Haml может быть добавлена в Gemfile, таким образом, автоматически компилируя файлы Haml в HTML при любых изменениях. Есть несколько настольных приложений, доступных для тех, кто не пользуется Rails, одним из наиболее популярных является CodeKit.

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

Доктайп

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

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

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

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

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

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

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

Атрибуты

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

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

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

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

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

В случае, если класс или идентификатор используется в

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

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

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

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

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

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

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

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

Комментарии

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

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

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

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

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

Фильтры

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

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

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

Фильтр Javascript

Фильтры CSS и Sass

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

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

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

SCSS и Sass

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

Sass (Syntactically Awesome Stylesheets, синтаксически замечательная таблица стилей) пришёл первым и у него строгий синтаксис с отступами. Sassy CSS последовал вскоре после этого, предлагая такую же огневую мощь, что и Sass, но с более гибким синтаксисом, включая возможность писать простой CSS.

Установка

Как и Haml, SCSS и Sass компилируются с помощью Ruby, поэтому Ruby должен быть установлен для создания файлов CSS. Пожалуйста, следуйте вышеприведённым указаниям для установки или убедитесь, что Ruby уже установлен.

После установки Ruby требуется команда gem install sass для установки SCSS и Sass.

Команда выше принимает Sass-файл styles.sass и компилирует его в файл styles.css. Как и с Haml, эти имена файлов являются путями и должны быть указаны правильно. Приведённая выше команда работает, когда эти файлы находятся в папке, из которой выполняется команда. Если файлы находятся за пределами папки, то путь к ним должен быть явно указан в команде.

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

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

Конвертирование файлов из SCSS в Sass и наоборот

У вас есть возможность конвертировать файлы SCSS и Sass в CSS, но вы также можете конвертировать файлы из SCSS в Sass и наоборот. Чтобы это сделать, может быть использована команда sass, показанная ниже, для преобразования файла SCSS в Sass, а затем файла Sass в SCSS, соответственно.

Синтаксис

Как уже отмечалось ранее, основное отличие между SCSS и Sass в их синтаксисе и разница эта в деталях. Синтаксис SCSS не сильно отличается по сравнению с обычным CSS. На самом деле, стандарт CSS будет работать внутри SCSS. Sass, с другой стороны, является довольно строгим и любой отступ или ошибки символов запретят компиляцию стилей. Sass опускает все фигурные скобки (<>) и точки с запятой (;), опираясь на отступы и сплошная строка разбивается для форматирования.

SCSS против Sass

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

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

Дальнейшие примеры в этом уроке будут использовать Sass, однако они также могут быть все выполнены и на SCSS.

Вложения

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

Вложенные свойства

Вложенные медиа-запросы

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

Родительский селектор

Родительский ключевой селектор

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

Комментарии

Синтаксис для тихих комментариев — это две косые черты (//). Любое содержание на этой строке или вложенные под ней будут исключены из компиляции. Заметьте, что в приведённом ниже примере строка // Пропущенный комментарий не отображается в скомпилированном CSS.

Переменные

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

Интерполяция переменных

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

Вычисления

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

Сложение совершается с помощью знака плюс (+) и может завершаться или нет единицами измерения. Когда это сделано с единицей, она связывается с первым числом в уравнении и затем эта единица будет использоваться в вычислении значения. К примеру, десять пикселей плюс один дюйм будет равняться 106 пикселям. Вычитание обрабатывается таким же образом, что и сложение, но со знаком минус (-) вместо этого.

Умножение выполняется с помощью символа звёздочки (*), однако только одно из чисел, если они указаны, может включать в себя единицу измерения. Использование знака процентов (%) возвращает остаток от деления двух чисел, и как с умножением, допускает только одно число, которое содержит единицу измерения.

Деление

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

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

Математика в деталях

Как можно ожидать, Sass также способен объединять несколько математических операций. Sass к тому же понимает, какие операции выполнять первыми, основываясь на применении скобок.

Числовые функции

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

Функция percentage() превращает значение в проценты. Функция round() округляет значение до ближайшего целого числа, по умолчанию округляет вверх, где это необходимо. Функция ceil() округляет значение вверх до ближайшего целого числа, а функция floor() округляет значение вниз до ближайшего целого числа. И, наконец, функция abs() находит абсолютное значение заданного числа.

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

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

Операции с цветом

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

Операции с HSLa

Манипуляции с цветом

Кроме операций с цветом Sass также может манипулировать цветом напрямую. Такого рода манипуляции обеспечивает наибольший контроль над тонкой настройкой определённых свойств цвета. С этим контролем также повышается сложность, поэтому манипуляции с цветом делаются несколько реже, чем операции с цветом.

Расширения

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

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

Селектор-заполнитель

Расширение селектора элемента

Как и с классами, расширения также работают со стандартными селекторами элементов.

Примеси

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

Аргументы по умолчанию

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

Переменные аргументы

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

Импорт

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

В следующих примерах все три файла normalize.sass, _grid.sass и typography.sass компилируются в один файл. В этом случае, если файл Sass с именем styles.sass импортирует все остальные файлы, и он компилируется в styles.css, то в HTML-документе следует ссылаться только на styles.css.

Циклы и условные выражения

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

Операторы

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

Функция if

Цикл for

Цикл each

Достаточно просто, правило @each возвращает стили для каждого элемента в списке. Список может включать несколько элементов, разделённых запятыми.

Цикл while

Правило @while постоянно возвращает стили, пока выражение не станет ложным. Эта директива принимает несколько различных операторов и переменная счётчика позволяет тонко контролировать точность цикла.

Другие препроцессоры

Haml и Sass не единственные доступные препроцессоры, включая также препроцессоры JavaScript. Вот некоторые другие популярные препроцессоры: Jade, Slim, LESS, Stylus и CoffeeScript.

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

Источник