Инструменты

Знакомство с HAML

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

Для того что бы почитать о haml достаточно зайти на haml.info

для его установки используем консоль команду

для конвертации haml документа в html или иной другой формат

Пример:

В Haml, мы пишем тег с помощью знака процента, а затем имя тега.
Это работает для %strong, %div, %body, %html; любой тег какой вы захотите.

HAML:

HTML:

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

HAML:

HTML:

Но если говорить о ‘class’ и ‘id’ в haml все намного проще, так как эти атрибуты настолько общепринятые и с ними знакомы все кто знаком с CSS и jQuery, то в данном случае можно использовать соответствующие обозначения для них.

HAML:

HTML:

А так как div встречается так часто в нашем коде, то разработчики haml решили в принципе опустить этот тег, что позволяет писать только селекторы.

HAML:

HTML:

Выше я уже показал как отображать атрибуты элемента, но есть еще один способ, по мне он более приятный, и напоминает объекты в JasvaScript

HAML:

HTML:

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

Для тех кто не хочет заморачиваться с установкой и конвертацией в консоле можно воспользоваться онлайн конверторами, таким как http://www.haml-converter.com/
Но есть свои нюансы, а какие именно вы узнаете посмотрев урок.

Делись:

Оставь комментарий!

8 thoughts on “Знакомство с HAML

  1. Валерий:

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

  2. Валерий:

    Как заставить haml при конвертации закрывать одиночный тег?

    1. Евгений:

      Никак это анахронизм из xHTML и сейчас уже не применяется

    2. Oleg Murashov:

      http://omurashov.ru/haml-phpstorm-on-windows/ у себя как раз об этом писал (см. конец заметки). И дело не столько в потакании анахронизму, сколько в необходимости иметь валидный xml, где подобный слеш обязателен.

    3. Oleg Murashov:

      Еще, кстати, можно пользовать вот такую конструкцию %meta{charset: ‘utf-8’}/

Добавить комментарий