Show Menu

HAML Cheat Sheet by

HAML

Установка

В консоле gem install haml
В gemfile gem "­ham­l"
Все опции настар­ива­ютсчя в файле
conf­ig/­ini­tia­liz­ers­/ha­ml.rb

Основы синтаксиса

Отступ
2 пробела
html теги пишутся через %tag
%b , %p, %head
div теги пишутся с .class для класса и #id для id
.con­tainer, #message
Ruby с возвр. значения после =
=@user.name
Ruby код без вовзр после -
- 10.each do |x|
- end
Атрибуты тега через хэш
%p {:class => "­cod­e", :id => "­mes­sag­e"} Hello, World!
DOCTYPE заголовок
!!!
!!! Strict
!!! Frameset
!!! 5
!!! 1.1
!!! Basic
!!! Mobile
html коммен­тарий
/ коммен­тарий
haml коммен­тарий
-#ко­мме­нта­рий
Эскейп символ
\
Пустые теги
%br/
Интерп­оляция строк
%p Hello #{@use­r}!*
Многос­трочный Ruby через ,
- links = {:home => "/",
:docs => "/docs",
:about => "­/ab­out­"}
 

Примеры

%gee
  %whiz
    Wow this is cool!
<gee>
 <whiz>
   Wow this is cool!
 </whiz>
</gee>
%a{title: @title} Stuff
<a title=­'...'>­Stu­ff<­/a>
Можно исполь­зовать функции возвр. хэш:
def html_a­ttr­s(lang = 'en-US')
 ­ ­{:xmlns => "http://www.w3.org/1999/xhtml",
 ­ ­'xm­l:lang' => lang, :lang => lang}
end
%html{­h­tml­_at­trs­('f­r-f­r')}
HTML5 data кастомные атрибуты
%a{:href=>"/posts", :data => {:auth­or_id => 123}}
<a data-a­uth­or-­id=­'123' href='­/po­sts­'><­/a>
> - удалит whitespace вокруг тега
< - удалит whitespace внутри тега
- (42...4­7).each do |i|
  %p= i
%p See, I can count!
<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>See, I can count!­</p>
&= "Me & you"
& #{"Me & you"}
Me &amp; you
Me &amp; you
= "I feel <strong>!"
!= "I feel <st­ron­g>!­"
I feel &lt;strong&gt;!
I feel <st­ron­g>!
Мультистроки:
%whoo %hoo= h(              |
"I think this might get " +  ­ |
"­pretty long so I should " + |
"­pro­bably make it " +  ­ ­ ­ ­ ­ ­ ­ |
"­mul­tiline so it doesn't " +   |
"look awful."­)  ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ |
%p This is short.
- form_for stuff do
    ...

Download the HAML Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/kilrog_haml.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.