Точка и символ решетки позаимствованы из CSS. Они используются для краткого обозначения классов и идентификаторов любого элемента соответственно. Имена нескольких классов указываются как и в CSS, слитно и начинаются всегда с точки. Они указываются сразу после названия тега, но перед указанием атрибутов. Например: 

%div#things
  %span#rice Chicken Fried
  %p.beans{ :food => 'true' } The magical fruit
  %h1.class.otherclass#id La La La

компилируется в

<div id='things'>
  <span id='rice'>Chicken Fried</span>
  <p class='beans' food='true'>The magical fruit</p>
  <h1 class='class otherclass' id='id'>La La La</h1>
</div>

И еще пример:

%div#content
  %div.articles
    %div.article.title Doogie Howser Comes Out
    %div.article.date 2006-11-05
    %div.article.entry
      Neil Patrick Harris would like to dispel any rumors that he is straight

компилируется в

<div id='content'>
  <div class='articles'>
    <div class='article title'>Doogie Howser Comes Out</div>
    <div class='article date'>2006-11-05</div>
    <div class='article entry'>
      Neil Patrick Harris would like to dispel any rumors that he is straight
    </div>
  </div>
</div>

Краткое обозначение классов и идентификаторов можно комбинировать с указанием их в атрибутах; два значения будут объединены, как будто эти значения были в массиве (смотрите описание атрибут :class и :id). Например: 

%div#Article.article.entry{:id => @article.number, :class => @article.visibility}

что равнозначно

%div{:id => ['Article', @article.number], :class => ['article', 'entry', @article.visibility]} Gabba Hey

и компилируется в

<div class="article entry visible" id="Article_27">Gabba Hey</div>
На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.