Show Menu
Cheatography

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
    ...

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

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.