SASS : l'évolution du CSS pour Play, Rails ou autres

csssass

SASS, Syntactically Awesome Stylesheets, est un langage de feuille de style évolué qui permet de factoriser beaucoup de code css et de rendre son écriture et sa maintenance rapide et moins contraignante. Il est compilé en css.

Pourquoi utiliser SASS ?

Son utilisation a de nombreux avantages par rapport au CSS :

  • sa simplicité (pas de crochets, pas de point virgule mais juste de l’indentation)
  • l’imbrication des sélecteurs css (appliquant l’idée DRY : don’t repeat yourself)
  • l’utilisation de variables
  • l’utilisation d’opérations élémentaires (sur les pixels, les couleurs, …)
  • la factorisation du code (au lieu de faire des copier-coller, on peux factoriser le code à travers les “mixins”).
  • La réduction css et la clarté du code
  • La compression du code compilé avec la possibilité de tout mettre dans un fichier (via l’héritage) et de minimifier le code css.

Ce langage n’est pas difficile à apprendre, cela ressemble au css, avec de nombreuses fonctionnalités intéressantes en plus.

La syntaxe du langage

La syntaxe du sass est compatible avec celle du css à quelques exceptions près :

  • Ne plus mettre de point virgule ;
  • Ne plus mettre de crochets { }
  • Respecter les conventions traditionnelles (attribut: valeur un espace après le deux points mais pas avant)
  • Respecter l’indentation : Il faut choisir une indentation et s’y tenir dans un même fichier. Au choix : une tabulation, 2 espaces, 4 espaces, … Les lignes propriétés: valeurs d’un sélecteur css doivent dépasser d’une indentation ce sélecteur.

En respectant ces points, vous pouvez déjà coder en SASS comme en CSS.

Mais cela ne serait pas intéressant sans les nouveautés suivantes :

La factorisation des sélecteurs en plusieurs niveaux

Au lieu d’avoir ce type d’arborescence à un niveau :

.main .head
  color: red
.main .body
  color: blue

Nous pouvons factoriser le sélecteur “_.main_” et se ramener à deux niveaux :

.main
  .head
    color: red
  .body
    color: blue

Ce procédé de factorisation basé sur l’esprit DRY (Don’t Repeat Yourself) est aussi applicable sur les attributs eux-mêmes :

a
  font:
    family: serif
    weight: bold
    size: 1.2em

sera compilé en css par :

a {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Les variables

La possibilité d’utiliser des variables est un gros apport au css. Elle permet une meilleure maintenance du code et une meilleure scalabilité d’une application (en utilisant par exemple des fichiers sass de thèmes définissant toutes les couleurs, images, polices, …).
Il existe plusieurs types de variables (nombre réel, pixels, couleurs, chaines de caractères …) et il est possible d’utiliser des opérations élémentaires.

Lorsqu’on écrit une ligne attribut / value avec l’utilisation de variables (dynamique),
on utilise le caractère ‘**=‘ au lieu de ‘:**‘ pour l’affectation.

Les couleurs

!link_color = red
a
  color = !link_color
  &:hover
    color = !link_color #222

A noter que le symbole & remplace le sélecteur parent.

Ce qui donne le code compilé suivant :

a {
  color: red;
}
a:hover {
  color: #ff2222;
}

Les pixels

!margin = 16px
.border
  padding = !margin / 2
  margin = !margin / 2

donne le code compilé :

.border {
  padding: 8px;
  margin: 8px;
}

Les “mixins”

Les mixins sont des procédures qui contiennent plusieurs lignes de sass.
Il est possible d’utiliser des arguments sur ces mixins.

=border-radius(!radius = 5px)
  border-radius= !radius
  -moz-border-radius= !radius
  -webkit-border-radius= !radius
#wrapper
   border-radius(10px)
  > footer
     border-radius()

Cet exemple est typiquement intéressant car il permet d’utiliser border-radius de façon cross-browser et avec une ligne de code.

A noter qu’il est possible d’affecter des valeurs par défaut aux mixins.

Le résultat css compilé est le suivant :

#wrapper {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#wrapper > footer {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

Exemple complet

Voici un exemple complet de l’utilisation du SASS

/* This is just an example */

/* variables */
!main_width = 900px
!aside_width = 300px
!section_width = 520px

!link_color = red

!font_title = "Liberation","Georgia","serif"

/* mixins */
=border-radius(!radius = 5px)
  border-radius= !radius
  -moz-border-radius= !radius
  -webkit-border-radius= !radius

=block()
  display: block
  overflow: auto

/* colors */
a
  color = !link_color
  &:hover
    color = !link_color #222


/* layout */

#wrapper
  margin:  auto
  position: relative
  width = !main_width
   border-radius(10px)
  >nav
     block()
    padding: 2px
      top: 5px
    font-size: 1.2em
    font-family = !font_title
    a
      font-weight: bold
      &:hover
        color: white

  >header
     block()
    clear: both
    height: 48px
    font-family = !font_title

  >footer
     block()
    padding: 5px
    text-align: center
    clear: both

  #main
    position: relative
    >section
       block()
      width = !section_width
      padding: 20px

    >aside
       block()
      float: right
      width = !aside_width
      padding: 20px

et le résultat du fichier CSS compilé

/* This is just an example */
/* variables */
/* mixins */
/* colors */
a {
  color: red;
}
  a:hover {
    color: #ff2222;
}

/* layout */
#wrapper {
  margin:  auto;
  position: relative;
  width: 900px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
  #wrapper >nav {
    display: block;
    overflow: auto;
    padding: 2px;
    padding-top: 5px;
    font-size: 1.2em;
    font-family: Liberation, Georgia, serif;
}
    #wrapper >nav a {
      font-weight: bold;
}
      #wrapper >nav a:hover {
        color: white;
}
  #wrapper >header {
    display: block;
    overflow: auto;
    clear: both;
    height: 48px;
    font-family: Liberation, Georgia, serif;
}
  #wrapper >footer {
    display: block;
    overflow: auto;
    padding: 5px;
    text-align: center;
    clear: both;
}
  #wrapper #main {
    position: relative;
}
    #wrapper #main >section {
      display: block;
      overflow: auto;
      width: 520px;
      padding: 20px;
}
    #wrapper #main >aside {
      display: block;
      overflow: auto;
      float: right;
      width: 300px;
      padding: 20px;
}

Le SASS offre encore plus de possibilités, notamment l’interpolation, les conditions, les boucles, …
Vous trouverez plus d’informations sur la documentation SASS.

Utilisation

Pré-requis

Note: Ce qui suit ne s’applique pas pour le plugin sass du framework Play! .

Pour utiliser SASS, sous linux, installez les packets ruby et rubygems puis installez haml avec la commande :

gem install haml

Avec le framework java Play!

Grâce au module sass de play framework, le SASS est compilé à la volée au moment du chargement d’une page (en mode développement) ou au chargement de l’application (en mode production).

Installation

Depuis play 1.1, il suffit de lancer la commande

play install sass

Ensuite il faut activer le module dans la configuration de l’application (fichier conf/application.conf).

Avec le framework Ruby on Rails

Installation

Pour activer le plugin SASS sur une application Rails, lancez :

haml --rails path/to/rails/app

Autrement

Vous pouvez toujours utiliser SASS en compilant vos fichier sass en css à chaque modification (voir Commandes pratiques).
Vous inclurez ensuite le fichier css compilé dans votre html.

Convertir ses anciens CSS en SASS

Si vous ne voulez pas repartir de zéro dans le design d’un projet, vous pouvez tout à fait repartir avec les anciens CSS en les exportant en SASS.

Commandes pratiques

  • Pour convertir vos fichier CSS en SASS il vous suffit d’utiliser : css2sass

  • Pour compiler vos fichier SASS en CSS, utilisez: sass

Liens

Aller plus loin

As a generative plotter artist, I use code to generate art (creative coding) and physically create it with pen plotters, which is itself a generative process – each physical plot is a unique variant. I love dualities, like digital vs analog physical, abstract vs figurative, orthogonal vs polar, photo vs noise,...