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.
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 :
Dans un fichier HAML (.haml) ou SASS (.sass), il y a quelques règles à respecter :
%
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
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
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 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"
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
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 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 :
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
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
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
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
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
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
Pour pouvoir commencer à utiliser HAML et SASS, une simple commande est nécessaire :
sudo gem install haml
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.
L’équipe Synbioz.
Libres d’être ensembles.