В этой статье мы узнаем о препроцессоре HTML и рассмотрим препроцессор, используемый для HTML. Как следует из названия, препроцессор — это первый этап всего процесса компиляции, который включает удаление комментариев, расширение макросов, включение заголовков и т.д. Когда мы пишем HTML и CSS, иногда нам нужно повторить конкретный задача несколько раз, что приведет к неэффективности. Препроцессоры могут решить эти проблемы.
Препроцессор — это программа, которая принимает одну форму ввода данных и преобразует ее в другую форму входных данных, обычно в HTML и CSS. Препроцессор сделан с целью включения новых функций в существующие без нарушения совместимости браузера. Причина добавления препроцессора указана ниже:
- Он следует правилу DRY (Don’t Repeat Yourself), т.е. Нам не нужно переписывать или повторять один и тот же блок кода несколько раз для повторного использования одной и той же функции.
- Будет проще поддерживать код большого размера.
- Сокращает общее время разработки и помогает нам правильно организовать код.
Препроцессор HAML: Haml означает язык разметки абстракции HTML, созданный Хэмптоном Кэтлином, и единственная цель его создания — сделать разметку красивой. По сути, это препроцессор на основе Ruby, и для его установки требуется Ruby. Препроцессор HTML также можно понять, поскольку это программа, которая помогает разработчику сгенерировать синтаксис HTML из синтаксиса препроцессора. Он добавит некоторые уникальные функции, которых нет в синтаксисе чистого HTML. Следовательно, Haml разработан, чтобы избежать написания встроенного кода для веб-документов, который сделает HTML более чистым, а также обеспечивает гибкость, позволяющую иметь некоторый динамический контент в HTML. Поскольку препроцессоры — это программы, они всегда обрабатываются на некоторых языках, поэтому Haml обрабатывается в HTML и Sass. Мы выполним следующие шаги, чтобы установить HAML:
Для установки HAML:
gem install haml
Для преобразования HAML в HTML:
haml index.haml index.html
Примечание. Команда должна выполняться в том же каталоге, где находится индексный файл.
Пример 1
В этом примере мы просто создадим заголовок, используя HTML и HAML. Мы можем заметить, что избыточность кода уменьшится после преобразования из HTML в HAML с помощью препроцессоров.
Код для заголовка в Haml Pre-Processor:
%body %center %header %h1bestprogrammer %section %bA Computer Science Portal for Geeks
Код HAML преобразован в HTML:
HTML
<
body
>
<
center
>
<
header
>
<
h1
>bestprogrammer</
h1
>
</
header
>
<
section
>
<
b
>A Computer Science Portal for Geeks</
b
>
</
section
>
</
center
>
</
body
>
Примечание. Код Haml снижает читаемость кода HTML, но код сокращается синтаксически, а также по строкам.
Пример 2
В этом примере, мы будем изучать другой набор препроцессоров заменить классы в <div>.
Код HAML:
!!! 5 %html %head %title bestprogrammer HAML Tutorial %body %h3 .head HTML Abstraction Markup Language .container HAML is basically a Ruby-based pre-processor & required Ruby to be installed in your local machine for the Mac OS, Ruby comes preinstalled while for windows users.
Код HAML преобразован в HTML:
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>bestprogrammer HAML Tutorial</
title
>
</
head
>
<
body
>
<
div
id
=
"content"
>
<
h3
>HTML Abstraction Markup Language</
h3
>
<
div
class
=
"container"
>
HAML is basically a Ruby-based pre-processor
and required Ruby to be installed in your
local machine for the Mac OS, Ruby comes
preinstalled while for windows users.
</
div
>
</
div
>
</
body
>
</
html
>
Пример 3
В этом примере; мы узнаем, как использовать <blockquote>.
Код HAML:
%blockquote %div bestprogrammer has best minds
Код HAML преобразован в HTML:
HTML
<
html
>
<
head
>
<
body
>
<
blockquote
>
<
div
>
GeeksforGeeks has best minds
</
div
>
</
blockquote
>
</
body
>
</
html
>
ПРЕИМУЩЕСТВА
Следующие моменты, для которых препроцессор HAML считается полезным:
- Предпочитайте красивую разметку:она облегчает организованную разметку кода с удобным интерфейсом, а также структурированно отображает вывод.
- Правило DRY (Don’t Repeat Yourself):оно следует СУХОМУ подходу для отбрасывания ненужного HTML-кода, который требует большого повторения.
HTML
<
body
>
2
3
<!--Heading tags are opened and closed-->
4
<
h2
>bestprogrammer, A Computer Science portal for geeks.</
h2
>
5
6
<!--Body is closed-->
7
</
body
>
Препроцессоры HTML избегают всего этого, полагаясь на отступ, а не на текст. Чтобы определить, где элементы и блоки кода начинаются и заканчиваются. Это работает не только с большими шаблонами, но и с меньшими шаблонами, что делает код более понятным.
Выход:
%body
%h2 bestprogrammer, A Computer Science portal for geeks.
Следует отдавать предпочтение разметке с хорошим отступом : для улучшения внешнего вида язык разметки должен иметь хороший отступ, чтобы ее было легко читать. Он также определяет, где элемент начинается и заканчивается.
Должна быть четкая структура HTML:с минимальными усилиями он помогает поддерживать язык разметки с четкой структурой и логическим пониманием конечного результата.