haml에서 태그를 줄 바꿈하지 않는 방법 정리

소개

이 기사는 haml에서 줄 바꿈을 제어하는 ​​방법을 요약합니다.
haml로 만들어진 html 태그는 기본적으로 개행이 들어가기 쉽다.
그러나 어떤 경우에는 개행을 지우고 싶을 때도있을 것입니다.
디자인에도 영향을 미칩니다.
이번에는 haml에서 태그를 개행하지 않는 방법을 정리하고 설명합니다.

기본형

haml

%ul
  %li
    %span
  %li
    %a

html

<ul>
  <li>
    <span></span>
  </li>
  <li>
    <a></a>
  </li>
</ul>

안쪽 줄 바꿈

haml

첫 번째 li 바로 뒤에 <를 작성해 보겠습니다.

%ul
  %li<
    %span
  %li
    %a

html

그러면 li 안의 줄 바꿈이 제거되므로 li , span가 한 줄로 쓰여집니다.

<ul>
  <li><span></span></li>
  <li>
    <a></a>
  </li>
</ul>

바깥쪽 줄 바꿈

haml

li 의 직후에 > 를 써 봅니다.

%ul
  %li>
    %span
  %li
    %a

html

그러면 li 의 바깥쪽 줄 바꿈이 제거되므로 ul 와 다음 li 가 줄바꿈 없이 표시됩니다.

<ul><li>
    <span></span>
  </li><li>
    <a></a>
  </li>
</ul>

> 는 親のタグ 와의 개행을 지운다고 하는 설명이 되어 있는 경우가 있습니다만 , 올바르게는 이렇게 됩니다.

부모와 아이의 개행을 억제하는 경우는 이하와 같이 하는 것이 좋을 것 같습니다.

%ul<
  %li
    %span
  %li
    %a

<ul><li>
  <span></span>
</li>
<li>
  <a></a>
</li></ul>

요약

haml의 개행의 삭제에 관해서는 < 는 안쪽, > 는 바깥쪽이라고 기억하는 것이 좋을 것 같습니다.

확인에 사용한 사이트

추가

공식 문서에 잡힌 설명이 쓰여졌습니다
htp://는 ml. 인후/도cs/나 r도c/후아. 레후렌센. html # 우와 s 파세_ 레모 ゔ ぁ l__ 안 d_
You can think of them as alligators eating the whitespace: > faces out of the tag and eats the whitespace on the outside, and < faces into the tag and eats the whitespace on the inside.
엘리게이터🐊