代替常规标签的百分号

Question

我偶然发现了以下Codepen，非常喜欢它。我从未见过以这种方式编码的html，我想了解作者在这里所做的事情。 HTML窗格中没有标签，但是作者使用％代替。 ％在这里是什么意思，$ base-color是什么？谢谢。

https://codepen.io/centem/pen/vYBqQEd

HTML
.container
  .column
    .til
      %h1 Taller de Diseño Gráfico II
      %p NARRATIVA VISUAL
    .sub
      %p TEMÁTICA
      %h3 Patrimonio Cultural Inmaterial
  .column.align-h
    .circle-wrapper
      - (1..5).each do |i|
        %a{:class => "circle #{i}"}(href="#")#{i}
  .column
    .contain.text1
      %h2 Evaluación 1
      %p Definición del problema o necesidad
      %p Metodología de la investigación
      %p Aproximación al problema
      %h4 20 de Agosto
    .contain.text2
      %h2 Evaluación 2
      %p Fundamentos y Marco teórico
      %p Búsqueda de información, recopilación de datos, estado del arte, otros
      %h4 24 de Septiembre
    .contain.text3
      %h2 Evaluación 3
      %p Definición de propuesta - Narrativa Visual
      %p Contenidos conceptuales
      %h4 15 de Octubre
    .contain.text4
      %h2 Evaluación 4
      %p Proceso: Construcción de propuesta audiovisual
      %h4 29 de Octubre
    .contain.text5
      %h2 Evaluación 5
      %p Entrega final y presentación
      %p Exposición en sala del proceso y audiovisual
      %h4 26 de Noviembre

CSS

$base-color: #253C78;

Answer 1

称为Haml代码。在Haml中，我们使用百分号和标签名称来编写标签。这适用于%strong，%div，%body，%html；您想要的任何标签。然后，在标签名称为=之后，它告诉Haml在右侧评估Ruby代码，然后打印出返回值作为标签内容。

例如：

HTML

<strong class="code" id="message">Hello, World!</strong>

Haml

%strong{:class => "code", :id => "message"} Hello, World!

您可以阅读有关Haml here的更多信息。

谢谢。