haml의 틈을 채우기

haml에서 뷰를 편집하는 동안 엉망이 될 수 있었기 때문에 해결책입니다.

현상 및 코드

한마디로 틈새가 굉장히 신경이 쓰였을 뿐입니다.
1️⃣편집전

sample.html.haml

平均値を超えた数値は赤くなります

이것을 편집하여 "빨간색"부분의 문자색을 빨간색으로 만들려고했습니다.

2️⃣ 편집 후

sample.html.haml

平均値を超えた数値は
%span{style: "color: red"} 赤く
なります

span 태그로 color: red 을 맞춘 곳

어머?
생각했던 것과 다르다.


편집 전
편집 후






margin이나 padding을 맞춘 것은 아니지만 틈이 비었다.
아무래도 haml의 사양으로 개행한 것에 의해 틈이 생긴 것 같습니다.

3️⃣ 대책 후

sample.html.haml

平均値を超えた数値は
%span{style: "color: red"}> 赤く
なります

span 태그에 ">"를 붙인 것만으로 고쳤습니다.
분명히 '>'는 태그 외부의 틈을 채우고 '<'는 태그 안의 틈을 채워주는 것 같습니다.
빠른 이야기가 모두 붙여두면 OK 같아요.

참고 사이트

haml 공식 문서