Препроцессор HAML

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

Препроцессор это программа, которая использует свой синтаксис (метаязык), а затем преобразовывает его в HTML код (если это препроцессор HTML) или в CSS код (CSS препроцессор). Наиболее популярными препроцессорами для HTML являются Jade и HAML, для CSS – LESS и Sass.

Сегодня мы рассмотрим работу с HAML.

Установка HAML

Для установки HAML, который расшифровывается как HTML abstraction markup language, мы воспользуемся системой управления пакетами RubyGems. Как установить Ruby и кратко о менеджере пакетов Gems читайте здесь.

Итак, вы запустили командную строку с Ruby и теперь нужно ввести команду:

gem install haml

Если все прошло нормально, то система отрапортует вам, что был установлен препроцессор и документация к нему.

Для конвертации любого файла в формате haml в файл в формате html вам необходимо в командной строке набрать:

haml index.haml index.html

Имена и пути к файлам вы вводите реальные.

Для тестирования установки возьмите данный файл и скопируйте его в заранее подготовленную папку на диске. Перейдите в папку с помощью консоли. Для тестирования я выбрал диск D:, на котором создал папку test. В папку поместил test.haml.

Запустите командную строку с поддержкой ruby (start command promt with ruby) и наберите команду:

d: — для смены диска (после ввода команды нажал Enter):

cd test

cd test для входа в каталог test:

dir

dir для просмотра каталога:

haml test.haml index.html

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

Если все прошло успешно, то в каталоге появится файл index.html, в котором содержится всего лишь одна надпись:

<!DOCTYPE html>

1	<!DOCTYPE html>

Команды и результат их выполнения

C:\Users\Asmodey>d:
  
  D:\>cd test
  
  D:\Test>dir
   Том в устройстве D имеет метку media
   Серийный номер тома: 1277-3090
  
   Содержимое папки D:\Test
  
  21.03.2016  07:51    <DIR>          .
  21.03.2016  07:51    <DIR>          ..
  21.03.2016  07:51                 5 test.haml
                 1 файлов              5 байт
                 2 папок  11 777 425 408 байт свободно
  
  D:\Test>haml test.haml index.html
  
  D:\Test>

C:\Users\Asmodey>d:

D:\>cd test

D:\Test>dir

Том в устройстве D имеет метку media

Серийный номер тома: 1277-3090

Содержимое папки D:\Test

21.03.2016 07:51 <DIR> .

21.03.2016 07:51 <DIR> ..

21.03.2016 07:51 5 test.haml

1 файлов 5 байт

2 папок 11 777 425 408 байт свободно

D:\Test>haml test.haml index.html

D:\Test>

Как видно, файл препроцессора HAML это обыкновенный текстовый документ с расширением haml.

Основы верстки с HAML

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

Doctype

Для добавления Doctype используйте команду:

!!! 5

!!! 5

Это добавит в ваш документ строку:

<!DOCTYPE html>

1	<!DOCTYPE html>

Объявление элементов и создание структуры

В отличие от HTML препроцессор HAML для объявления элементов использует только открывающийся тег. Название любого элемента начинается со знака % :

  %head
  %body
  %div
  %br
  %meta

%head

%body

%div

%br

%meta

создадут следующий код

<head></head>
<body></body>
<div></div>
<br>
<meta>

<br>

<meta>

Как видно, HAML различает парные и непарные теги. Использование одинарных тегов позволяет упростить код для восприятия.

Для создания структурированного документа в HAML используются отступы. Не важно как сделан отступ: одним пробелом, двумя, или клавишей tab. Важно, чтобы принятые отступы повторялись на протяжении всего документа. Для создания html документа наберите (с учетом оступов):

!!! 5
  %html
    %head
    %body

!!! 5

%html

%head

%body

Компилированный HTML выглядит:

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

<!DOCTYPE html>

<html>

</html>

Более усложненный вариант:

!!! 5
  %html
    %head
      %meta
      %title
    %body
      %div
        %p

!!! 5

%html

%head

%meta

%title

%body

%div

Результат:

<!DOCTYPE html>
<html>
  <head>
    <meta>
    <title></title>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<meta>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

Добавляем текст

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

  %h1
    Пример

1 2	%h1 Пример

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

<h1>
  Пример
</h1>

<h1>

Пример

</h1>

Атрибуты

Атрибуты в HAML можно объявлять несколькими способами, которые отличаются между собой. Объявить их можно как с помощью фигурных скобок {}, так и с помощью обычных (), первый подход применяется в Ruby, второй в HTML синтаксисе. Для простоты кодирования используйте на протяжении документа один из подходов.

  %img{:src => "shay.jpg", :alt => "Shay Howe"}
  %img{src: "shay.jpg", alt: "Shay Howe"}
  %img(src="shay.jpg" alt="Shay Howe")

%img{:src => "shay.jpg", :alt => "Shay Howe"}

%img{src: "shay.jpg", alt: "Shay Howe"}

%img(src="shay.jpg" alt="Shay Howe")

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

<img alt='Shay Howe' src='shay.jpg'>
<img alt='Shay Howe' src='shay.jpg'>
<img alt='Shay Howe' src='shay.jpg'>

Классы и id

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

  %p.one
  %span.two.three
  %h2#big.green

%p.one

%span.two.three

%h2#big.green

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

<p class='one'></p>
<span class='two three'></span>
<h2 class='green' id='big'></h2>

Для элементов div, сокращение %div писать не обязательно. Как и в Emmet, можно обойтись сокращенным написанием:

.awesome
.one.three

1 2	.awesome .one.three

Результат:

<div class='awesome'></div>
<div class='one three'></div>

1 2	<div class='awesome'></div> <div class='one three'></div>

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

  %p
      / комментарий
  /  
      пример
      блочного
      комментария

/ комментарий

пример

блочного

комментария

Результат

<p>
  <!-- комментарий -->
</p>
<!--
  пример
  блочного
  комментария
-->

<p>

</p>

<!--

пример

блочного

комментария

-->

Создание тихого комментария

Если вам необходимо создать комментарий, который будет отображаться только в HAML файле, то используйте синтаксис -# :

  %div
    -# Removed line
    Actual line

%div

-# Removed line

Actual line

В скомпилированном файле строки после -# не будет:

<div>
  Actual line
</div>

<div>

Actual line

</div>

Надеюсь, у вас все получилось.

Также, HAML можно использовать в CodePen (для этого нажмите шестеренку перед HTML и выберите HAML препроцессор). Результат:

w3.org.ua

уроки front-end и back-end

Препроцессор HAML

Установка HAML

Основы верстки с HAML

Doctype

Объявление элементов и создание структуры

Добавляем текст

Атрибуты

Классы и id

Комментарии

Создание тихого комментария

Еще статьи:

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