Sass – CSS on fire that sucks less

Sass étend les capacités du css en rajoutant la possibilité d’utiliser des variables, des fonctions, l’héritage de sélection… Tout un tas de choses qui permet non seulement de simplifier le code mais aussi, selon moi, de rendre plus logique les feuilles de styles. La structure du dom saute facilement aux yeux.

Installation

On installe sass comme n’importe quelle autre gem Ruby.

gem install sass
sass --watch default.scss
>>> Sass is watching for changes. Press Ctrl-C to stop.
  overwrite default.css

Vous l’avez compris, le fichier est automagiquement compilé en css à la volée grâce à l’attribut watch.

Les 2 types de syntaxes

Il y a deux syntaxes différentes qui n’influent pas sur les fonctionnalités. On va dire que c’est une question de goût. Il y a une version Python-like (sass) qui, historiquement, était la première. La seconde (scss – Sassy CSS) reprend la syntaxe du css. L’avantage de celle-ci étant qu’un fichier .css est aussi un fichier .scss.
La différence se fait par le compilateur sur l’extension.

/* SASS */
section
  margin-bottom: 1em
  .entry
    color: red

/* SCSS */
section {
  margin-bottom: 1em;
  .entry {
    color: red;
  }
}

Imbrication

Principe

Le meilleur moyen d’éviter la répétition est d’imbriquer les sélecteurs entre eux. Dans la suite de l’article je montrerai le code scss et l’équivalent compilé en css.

/* SCSS */
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

article {
  header, section { margin-top: 1em }
}

/* CSS */
table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

article header, article section {
  margin-top: 1em;
}

Le sélecteur parent

Pense juste à self ou this comme dans les langages objets, copain. Dans sass on utilise le symbole &.

/* SCSS */
a {
  color: #324567;
  &:hover { color: red }
  display: inline-block;
  line-height: 1.6em;
}

/* CSS */
a { color: #324567; display: inline-block;
    line-height: 1.6em; }
a:hover { color: red }

Media queries

/* SCSS */
#content {
  margin: 0 2.5em;
  @media screen and (max-width: 460px) {
    margin: 0 1.5em;
  }
}

/* CSS */
#content { margin: 0 2.5em; }
@media screen and (max-width: 460px) {
  #content { margin: 0 1.5em; }
}

Les variables

J’ai déjà eu la nécessité de changer une ou plusieurs couleurs dans le thème d’un site. C’est donc X lignes que tu dois modifier. Avec les variables on a pas ce problèmes là, il suffit de définir les couleurs une fois seulement. Les variables dans sass peuvent aussi stocker des tailles, des chaînes de caractères…

/* SCSS */
$link-color: blue;
$link-hover: red;
$pad: 3px;
a {
  color: $link-color;
  &:hover { color: $link-hover; }
  padding: $pad;
}

/* CSS */
a { color: blue; padding: 3px; }
a:hover { color: red; }

@extend

Cet attribut permet de spécifier qu’une classe hérite des propriétés d’une autre. Imaginons que vous ayez une classe .button contenant le style de base d’un bouton sur votre site et une classe .button-submit qui lui aura juste une couleur différente. L’attribut @extend vous évite à mettre dans le dom les 2 classes sur ce bouton mais uniquement la dernière.

/* SCSS */
.button {
  background: blue; color: white;
  padding:0.2em 0.8em;
  border-radius:0.4em;
}
.button-submit {
  @extend .button;
  background: green;
}

/* CSS */
.button, .button-submit {
  background: blue; color: white;
  padding:0.2em 0.8em;
  border-radius:0.4em;
}
.button-submit { background: green; }

Mixins

Les mixins ce sont des bouts de codes que tu peux rappeler ensuite ailleurs dans tes classes. Utiles pour éviter la duplication de codes encore une fois. Des valeurs peuvent être envoyés en paramètres, et celles-ci sont nommées et peuvent avoir une valeur par défaut.

/* SCSS */
@mixin border-radius($amount: 10px) {
  border-radius: $amount;
  -webkit-border-radius: $amount;
  -moz-border-radius: $amount;
}
.msg { @include border-radius(5px); }

/* CSS */
.msg {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

Autres fonctionnalités

• Vous pouvez diviser votre code en plusieurs fichiers et les importer avec @import, ils seront combinés avec la compilation
• Des méthodes de calculs sont supportées, vous pouvez additionner, diviser et jouer avec les tailles, couleurs et autres valeurs.
• Des opérateurs @if, @else, @else if, des opérateurs de logique and, or, =, ainsi que des boucles @for, @while et @each sont supportés. Mais je suis moins fan de ce genre de pratiques dans un fichier de style.
• Des méthodes pour jouer sur les couleurs : plus foncé, plus clair…

Conclusion

Sass peut rendre l’utilisation du css plus sympathique. Si vous voulez en savoir plus je vous conseille de vous rendre sur la page officielle de l’application. Vous y trouverez des exemples et de la documentation sur d’autres fonctionnalités non évoquées ici.

Si Ruby vous rebute, il y a une autre application qui s’appelle LESS et qui fait en gros la même chose, la syntaxe étant un peu différente.

En tout cas une chose est sûre, je vais l’utiliser sur mon prochain projet. Reste à trouver le projet.