Знак процента вместо обычных тегов - PullRequest
Новая
       16

Знак процента вместо обычных тегов

3 голосов
/ 31 октября 2019

Я наткнулся на следующий 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

1 Ответ

1 голос
/ 31 октября 2019

Это код 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 можно прочитать в уроке .

...