[УРОК 75] HAML – HTML-препроцессор и шаблонизатор
Сайтодел
HAML представляет собой язык разметки для упрощенного представления HTML. Создатели считают, что код должен быть красивым, удобным и приятным, причем не столько в целях эстетики, сколько для облегчения работы. Также HAML стремится избавить разметку от повторов, делая таким образом ее короче и читабельнее.
Из этого урока вы узнаете:
1) Как установить HAML
2) Как начать пользоваться препроцессором
3) Какие возможности есть у HAML
1) Как установить HAML?
Для того чтобы HAML установился на ваше устройство, должен быть установлен Ruby. На Mac OS X уже установлен Ruby, а для пользователей Windows требуется его установить дополнительно.
Как только установлен Ruby, откройте командную строку и начните установку HAML:
gem install haml
Чтобы конвертировать документы с раcширением .haml в.html, используйте следующую команду:
haml index.haml index.html
Эта команда должна запускаться для каждого отдельного конвертируемого файла.
2) Как начать пользоваться препроцессором?
Первое, что бросается в глаза – это отличия HAML от стандартного HTML. Здесь отсутствуют парные теги и длинные ссылки. Теги начинаются со знака %, затем пишется само название тега и его класс или id. Если имени тега нет, то по умолчанию используется div.
Чтобы добавить в код Doctype, используйте конструкцию, которая заменяет
<!DOCTYPE html>:
!!! 5
Для того, чтобы создать структурированный документ в HAML, применяйте отступы. Можно нажимать пробел или использовать tab – особой роли это не играет. Пример кода на HAML с отступами:
Чтобы добавить текст внутрь тега, нужно просто написать его в следующей строке, сделав отступ.
Чтобы создать класс или id для тега, поставьте после выбранного элемента точку и напишите имя класса или id . Если вам нужно несколько классов, поставьте их через точку.
Название класса для элемента div можно написать, начиная сразу с точки:
.mainblock
Для создания комментария используйте слеш (/).
3) Какие возможности есть у HAML?
HAML позаимствовал многое из языков программирования и тем самым упросил работу разработчикам и верстальщикам.
В HAML есть условный оператор if, почти такой же, как и в JavaScript! Этот оператор дает возможность ветвления.
Для автоматизации монотонных действий в HAML используются циклы. Это очень удобно для работы с однообразными данными.
Помимо циклов, в HAML есть и массивы:
Дополнительные возможности HAML описаны в подробной и понятной документации, которая размещена на официальном сайте проекта.
Надеемся, что статья была интересной и полезной. Применяйте знания в своей практике и не забудьте подписаться на наш канал!
До скорой встречи!
Ссылка на канал: https://t.me/sitodel