百分号代替常规标签

Question

我无意中发现了以下 codepen 并且非常喜欢它。我从未见过 HTML 以这种方式编码，我想了解作者在这里做什么。 HTML 窗格中没有标签，但作者使用 %。这里的 % 是什么意思，$base-color 是什么意思？

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

Answer 1

那是Haml代码。在Haml中，我们通过使用百分号（%）然后是标签来编写标签，例如：%strong、%div、%body、%html ;你想要的任何标签。然后，在标签名称 = 之后，它告诉 Haml 计算右边的 Ruby 代码，然后打印出 return 值作为标签的内容。

例如：

HTML:

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

哈姆尔：

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

您可以在 tutorial 中阅读有关 Haml 的更多信息。

百分号代替常规标签

Percent signs in place of regular tags

html

css

ruby

haml