HAML / SASS, qu’est ce que c’est ?

HAML et SASS sont des langages de template qui vont vous permettre de simplifier l’écriture et la maintenance de vos vues ainsi que de vos feuilles de style. Par la même occasion, les fichiers HTML et CSS générés auront l’avantage d’être bien indentés.

HAML est le langage qui vous permet de générer de l’HTML, SASS lui est dédié à la génération de vos fichiers CSS.

HAML et SASS peuvent être utilisés indépendamment. Il faut également savoir que HAML et SASS, peuvent être utiliser standalone, comprendre depuis la ligne de commande pour convertir un fichier .haml en fichier .html ou un fichier .sass en fichier .css. Ils peuvent également être utilisés directement depuis du code Ruby, intégrés dans Rails ou dans une application Rack.

HAML

Les principes derrière HAML

Quelques principes fondamentaux ont poussés les auteurs de HAML / SASS a écrire ces langages, il est évident pour eux que du code doit être :

• Beau
• DRY
• Correctement indenté
• Clair et donc facilement lisible

Les bases

Dans un fichier HAML (.haml) ou SASS (.sass), il y a quelques règles à respecter :

• Les espaces comptent
• L’indentation définie la structure (niveau d’imbrication)
• Les balises commencent pas un %
• Les balises se ferment automatiquement
• Les attributs de balises sont définis dans des hash

Exemples

Générer des balises

Balise simple sans contenu dynamique

Version HTML :

Synbioz utilise HAML

Version HAML :

%h1 Synbioz utilise HAML

Balise simple avec contenu dynamique

Version HTML :

Synbioz utilise HAML <%= Time.now %>

Version HAML :

%h1= "Synbioz utilise HAML #{Time.now}"

Balise avec un id

Version HTML :

Test

Version HAML :

%div#test Synbioz utilise HAML

ou plus court

#test Synbioz utilise HAML

Les attributs

Balise avec un id et un attribut class

Version HTML :

<div id="test" class="rouge">rouge</div>

Version HAML :

%div#test.rouge

ou encore

#test.rouge

Les boucles

Régulièrement vous aurez besoin de parcourir un tableau pour afficher ses éléments, voici comment faire :

Version HTML :

<ul id="list">
  <% @ma_liste.each do |el| %>
  <li><%= el.name %></li>
  <% end %>
</ul>

Version HAML :

%ul#list
  - @ma_liste.each do |el|
    %li= el.name

Les formulaires

Les formulaires sont le coeur des applications Web, voici comment en générer un :

Version HTML :

<% form_for :comment do |f| %>
  Vos réactions :
  <%= f.text_area :body, :rows => 10, :cols => 40 %>
  <%= f.submit "Commenter" %>
<% end %>

Version HAML :

- form_for :comment do |f|
  %label{:for => "comment_body"} Vos réactions :
  = f.text_area :body, :rows => 10, :cols => 40
  = f.submit "Commenter"

Layout

Bien souvent un application Web contient de nombreuses pages mais pour la plupart le design est quasi identique d’une page à l’autre. Pour schématiser, on insère du contenu dans un cadre similaire de page en page. Plutôt que de dupliquer le code redondant de pages en pages, on utilise donc les layouts, voici comment faire avec HAML :

!!!! Strict
%html{html_attrs}
  %head
  %meta{:http-equiv => "Content-type", :content => "text/html;charset=UTF-8"}
  %body
    = yield

Javascript inline

Vous aurez parfois besoin d’insérer un morceau de javascript au beau milieu de votre code HTML, bien que cette pratique soit reconnue comme mauvaise et qu’il faut autant que possible déporter votre code javascript dans des fichiers externalisé, pour notamment améliorer les possibilités de mise en cache par les navigateurs, il reste parfois impossible de faire autrement que d’insérer ce code inline. A utiliser avec parcimonie donc mais il faut le savoir, voici comment insérer du javascript inline en HAML :

:javascript
  alert('Hello World!');

SASS

Les principes derrière SASS

SASS et HAML ayant étaient écrits par les même auteurs, il est normal d’y retrouver des similitudes dans la façon de penser et les raisons de la création de ce langage, un fichier CSS et son code source doivent donc être :

• DRY
• Correctement indenté
• Clair et lisible SASS a en plus l’avantage d’amener avec lui quelques améliorations qui permettent de faciliter la vie comme l’utilisation des variables ou encore l’héritage.

Les bases

Définir les propriétés pour un objet du DOM ayant un id connu :

Version CSS :

#column {
  border: 1px solid #fff;
  color: #eee;
}

Version SASS :

#column
  border: 1px solid #fff
  color: #eee

Imbrication

SASS permet également de nous simplifier la vie en permettant l’imbrication ce qui augmente la maintenabilité et la concision :

Version CSS :

#column {
  border: 1px solid #fff;
  color: #eee;
}

#column.orange {
  border: 1px solid orange;
}

Version SASS :

#column
  border: 1px solid #fff
  color: #eee
  .orange
    border: 1px solid orange

Utilisation de variables

Avec SASS, il est possible de définir et utiliser des variables pour simplifier la lisibilité, on peut par exemple définir des variables contenant des couleurs hexadécimales ce qui nous évitera d’avoir à retenir les codes ou de se demander à quelle couleur correspond tel code :

/* On définit une variable dans laquelle on stocke notre couleur grise */
!grey = #e7e7e7
#column
  border: 1px solid #fff
  color: #eee
  .grey
    /* Et on l'utilise
    border: = !grey

Les mixins

Encore plus pratique que les variables, les mixins vous permettent de réutiliser des morceaux complets de CSS, propriétés ou sélecteurs.

Version CSS :

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Version SASS :

@mixin table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

@mixin left($dist)
  float: left
  margin-left: $dist

#data
  @include left(10px)
  @include table-base

Héritage

SASS permet de demander à un sélecteur d’hériter de tous les styles d’un autre sélecteur ce qui évite de dupliquer des propriétés CSS identiques :

Version CSS :

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Version SASS :

.error
  border: 1px #f00
  background: #fdd

.error.intrusion
  font-size: 1.3em
  font-weight: bold

.badError
  @extend .error
  border-width: 3px

Références

Toujours dans un souci d’éviter les duplications, SASS nous permet de faire référence à l’élément parent pour créer des règles qui en CSS serait purement et simplement dupliquées :

Version CSS :

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

Version SASS :

a
  font-weight: bold
  text-decoration: none
  &:hover
    text-decoration: underline
  body.firefox &
    font-weight: normal

Installation de HAML / SASS

Pour pouvoir commencer à utiliser HAML et SASS, une simple commande est nécessaire :

sudo gem install haml

Convertir du contenu existant

Pour démarrer facilement la transition, l’équipe de développeurs a pensé à nous fournir deux utilitaires en ligne de commande qui permettent de passer d’un fichier HTML à sa version HAML et d’un fichier CSS à un fichier SASS. C’est certainement le meilleur moyen de mettre le pied à l’étrier en testant ces outils sur un projet existant.

• html2haml
  • html2haml index.html index.haml
  • html2haml –erb index.html.erb index.html.haml
• sass-convert : sass-convert main.css main.sass

L’équipe Synbioz.

Libres d’être ensembles.