什么是 HTML 预处理器？

在本文中，我们将了解 HTML 预处理器并探索用于 HTML 的预处理器。顾名思义，预处理器是整个编译过程的第一阶段，包括删除注释、扩展宏、包含标题等。当我们编写 HTML 和 CSS 时，有时我们需要重复特定的任务多次，因此会导致效率低下。预处理器可以克服这些问题。

预处理器是一个程序，它接受一种形式的数据输入并将其转换为另一种形式的输入数据，通常在 HTML 和 CSS 中。预处理器的目的是在不违反浏览器兼容性的情况下将新功能包含在现有功能中。添加预处理器的原因如下：

• 它遵循 DRY 规则（不要重复自己），即我们不需要多次重写或重复相同的代码块来重用相同的功能。
• 维护大尺寸代码会更容易。
• 减少整体开发时间并帮助我们正确组织代码。

HAML 预处理器：Haml 代表 HTML 抽象标记语言，由 Hampton Catlin 创建，创建它的唯一目标是使标记美观。它基本上是一个基于 Ruby 的预处理器，需要安装 Ruby。 HTML预处理器也可以理解为它是一个帮助开发者从预处理器的语法生成HTML语法的程序。它将添加一些在纯 HTML 语法中不存在的独特功能。因此，Haml 旨在避免为 Web 文档编写内联代码，这将使 HTML 更干净，并且还提供了在 HTML 中包含一些动态内容的灵活性。由于预处理器是程序，它们总是以某些语言处理，因此 Haml 以 HTML 和 Sass 处理。我们将按照以下步骤安装 HAML：

安装 HAML：

gem install haml

将 HAML 转换为 HTML：

haml index.haml index.html

注意：命令必须在索引文件所在的同一目录中运行。

示例 1：在此示例中，我们将简单地使用 HTML 和 HAML 创建一个标题。我们可以注意到，在使用预处理器从 HTML 转换为 HAML 后，代码中的冗余会减少。

Haml 预处理器中的标头代码：

%body
%center
%header
 %h1GeeksforGeeks
%section 
 %bA Computer Science Portal for Geeks

转换成 HTML 的 HAML 代码代码：

HTML

    
        

            
GeeksforGeeks
        
        

            A Computer Science Portal for Geeks
        
    

输出：

注意： Haml 代码会降低 HTML 代码的代码可读性，但代码会在语法上和行上减少。

示例 2：在本示例中，我们将学习另一组预处理器来替换

中的类。

HAML 代码：

!!! 5
%html
 %head
  %title GeeksforGeeks 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.

转换为 HTML 的 HAML 代码：

HTML

 

    

 

    

        
HTML Abstraction Markup Language
        

            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.
        
    

 

输出：

示例 3：在此示例中；我们将学习如何使用

。

HAML 代码：

%blockquote
%div 
 GeeksforGeeks has best minds

转换成 HTML 的 HAML 代码代码：

HTML

 

 

    

        

            GeeksforGeeks has best minds
        
    

 

输出：

优点

HAML 预处理器被认为有用的以下几点：

• 喜欢漂亮的标记：它通过用户友好的体验促进代码的有组织的标记，并以结构化的方式呈现输出。
• DRY(Don't Repeat Yourself) 规则：它遵循 DRY 方法来丢弃涉及大量重复的不必要的 HTML 代码。

HTML

2
   
3
  
4
GeeksforGeeks, A Computer Science portal for geeks.
  
5
​
6
  
7
  

HTML 预处理器通过依赖缩进而不是文本来确定元素和代码块的开始和结束位置，从而避免了所有这些。它不仅适用于大型模板，而且可以生成更小的模板，这使得代码看起来更清晰。

输出：

%body

%h2 GeeksforGeeks, A Computer Science portal for geeks.

• 应首选缩进良好的标记：为了改善外观，标记语言应缩进良好，使其易于阅读。它还确定元素的开始和结束位置。
• 应该有一个清晰的 HTML 结构：通过一些最小的努力，它有助于维护标记语言，对最终结果有清晰的结构和逻辑理解。