SASS: CSS avancé

L’étude de LESS m’a donné envie de regarder d’autres pré-processeurs CSS. Le plus connu avec LESS est SASS, qui est également utilisé par des frameworks comme Foundation. Basé sur Ruby, cet environnement offre un langage plus complet que LESS.

SASS est apparu en 2006/2007. Il est donc antérieur à LESS, qui s’est inspiré de ce langage (et non l’inverse).

Installation

SASS nécessite le langage RUBY pour fonctionner. Il se présente sous la forme d’un GEM (plugin ou librairie) de Ruby.

L’installation de SASS s’effectue donc en deux étapes:

  • Il faut télécharger, puis installer Ruby sur votre machine. Je vous conseille la lecture de la documentation de Ruby pour la procédure d’installation,
  • puis installer SASS, avec la commande gem install sass.

Les modes d’utilisation

SASS peut être utilisé de trois façons différentes:

  • en ligne de commande: pour traduire le fichier .sass, ou .scss, en fichier .css. Ce mode est utilisé, pendant les phases de développement,
  • comme un module RUBY standard, pour le développement en Ruby,
  • intégré à un framework comme Ruby on Rails. Sass est alors utilisé côté serveur.

En ligne de commande, deux modes sont disponibles:

  • « Compilation » simple: sass input.scss output.css,
  • « Compilation » continue: sass --watch input.scss:output.css. Dans ce cas, sass surveille le fichier .scss, et le « compile » dès qu’une modification est détectée.

Le langage

Pour simplifier la description du langage SASS, je me suis basé sur l’article sur LESS, en effectuant un rapide comparatif des points communs, et en m’attardant un peu plus sur les spécificités de SASS.

Un premier commentaire important au sujet de la syntaxe: il existe deux syntaxes distinctes pour SASS

  • La syntaxe dite « indentée » (extension de fichier .sass) est censée simplifier, et réduire la saisie du code. Concrètement, il n’y a ni point-virgule, ni accolade. L’indentation marque l’imbrication des propriétés, des classes, …, et le saut de ligne remplace le point-virgule.
  • La syntaxe dite « SCSS » (extension de fichier .sccss) est la plus rescente, et elle est compatible avec la syntaxe de CSS. Le séparateur est le point-virgule, et nous n’avons plus les contraintes de saut de ligne de la méthode précédente.

Je ne peux que recommander l’utilisation de la seconde syntaxe. La première est éloignée de la syntaxe CSS, et elle est relativement contraignante: impossible d’avoir plusieurs propriétés sur la même ligne, l’indentation avec des tabulations est obligatoire, …

La seconde syntaxe est identique à celle de CSS et celle de LESS. L’adaptation est donc rapide.

Caractéristiques communes à SASS et LESS

Les variables

Avec SASS:

1
2
3
$border-color: #DDD;
.dialog { border: 1px solid $border-color; }
.menu { border-bottom: 1px solid $border-color; }

Avec LESS:

1
2
3
@border-color: #DDD;
.dialog { border: 1px solid @border-color; }
.menu { border-bottom: 1px solid @border-color; }
Les mixins

Avec SASS:

1
2
3
4
5
6
7
8
9
10
11
12
@mixin bordered {
	border-top: 2px solid black;
	border-bottom: 1px solid #ccc;
}
.widget-title {
	color: #333;
	@include bordered;
}
nav.main-menu li {
	color: #3C0;
	@include bordered;
}

Avec LESS:

1
2
3
4
5
6
7
8
9
10
11
12
.bordered {
	border-top: 2px solid black;
	border-bottom: 1px solid #ccc;
}
.widget-title {
	color: #333;
	.bordered;
}
nav.main-menu li {
	color: #3C0;
	.bordered;
}
Les mixins avec arguments

Avec SASS

1
2
3
4
5
6
7
8
9
10
11
12
@mixin bordered($top-border: 2px, $border-color: #ccc) {
	border-top: $top-border solid black;
	border-bottom: 1px solid $border-color;
}
.widget-title {
	color: #333;
	@include bordered(1px, black);
}
nav.main-menu li {
	color: #3C0;
	@include bordered(2px, #CCC);
}

Avec LESS:

1
2
3
4
5
6
7
8
9
10
11
12
.bordered(@top-border: 2px, @border-color: #ccc) {
	border-top: @top-border solid black;
	border-bottom: 1px solid @border-color;
}
.widget-title {
	color: #333;
	.bordered(1px, black);
}
nav.main-menu li {
	color: #3C0;
	.bordered(2px, #CCC);
}
Opérations

Avec SASS:

1
2
3
4
5
6
7
$base: 5%;
$filler: $base * 2;
$other: $base + $filler;
 
color: #888 / 4;
background-color: $base-color + #111;
height: 100% / 2 + $filler;

Avec LESS:

1
2
3
4
5
6
7
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
 
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
Les fonctions

SASS dispose d’un assez grand nombre de fonctions:

  • arithmétiques: round, ceil, floor, percentage, abs, …
  • mais également pour les listes, et les chaines: length, join, type-of, unit, unitless, comparable, unquote, quote,…

LESS dispose de fonctions arithmétiques seulement: round, ceil, floor, percentage

Gestion des unités

SASS comme LESS, identifie les unites (%, em, px, …).
Mais SASS effectue les conversions nécessaires lors des opérations arithmétiques (width: 1in + 8pt;, donnera width: 1.1111in)

Gestion des couleurs

SASS et LESS disposent tous les deux de fonctions avancées pour la gestion des couleurs.
La liste des fonctions disponibles pour SASS est plus exhaustives: lighten, darken, saturate, desaturate, alpha, adjust-hue, opacity, transparentize, grayscale, compliment

Sélecteurs imbriquées

La syntaxe est la même entre LESS et SASS:

1
2
3
4
5
6
7
8
9
10
11
#header {
	color: black;
 
	.navigation {
		font-size: 12px;
	}
	.logo {
		width: 300px;
		&:hover { text-decoration: none }
	}
}
Import de fichiers

SASS et LESS permettent l’import de fichiers avec la directive @import.
La syntaxe de SASS est cependant plus complète: @import "fichier.css/.scss/.sass", ou @import "http:// .... /"

Les particularités de SASS

Comme vous pouvez le constater, SASS et LESS ont beaucoup de points communs, avec cependant, un avantage pour SASS, qui propose un plus grand nombre de fonctions, et des opérateurs arithmétiques qui gèrent la conversion des unités, lorsque cela est possible.
Nous allons voir maintenant les fonctionnalités de SASS, non présentes avec LESS.

Les variables par défaut

SASS permet de définir des valeurs par défaut, pour les variables. Exemple (pris dans la documentation de SASS):

1
2
3
4
5
6
7
8
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
 
#main {
  content: $content;
  new-content: $new_content;
}

Donnera le code CSS suivant:

1
2
3
4
#main {
  content: "First content";
  new-content: "First time reference"; }
}
Structures de contrôle

SASS propose des structures conditionnelles (if … then … else), et des boucles (for , each, et while).

1
2
3
4
5
6
7
8
9
10
11
12
$type: monster;
p {
	@if $type == ocean {
		color: blue;
	} @else if $type == matador {
		color: red;
	} @else if $type == monster {
		color: green;
	} @else {
		color: black;
	}
}

Donnera le code CSS p { color: green; }

De même pour la boucle:

1
2
3
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

donnera le code CSS :

1
2
3
4
5
6
7
8
9
.item-1 {
	width: 2em;
}
.item-2 {
	width: 4em;
}
.item-3 {
	width: 6em;
}

Nous avons, de même, la boucle @each:

1
2
3
4
5
@each $animal in puma, sea-slug, egret, salamander {
	.#{$animal}-icon {
		background-image: url('/images/#{$animal}.png');
	}
}

Pour la boucle @while:

1
2
3
4
5
$i: 6;
@while $i > 0 {
	.item-#{$i} { width: 2em * $i; }
	$i: $i - 2;
}
Les fonctions

SASS apporte une notion de fonction, équivalente à ce que propose d’autre langage comme PHP, Javascript, … Une fonction est un code qui renvoie une valeur.

1
2
3
4
5
6
7
$grid-width: 40px;
$gutter-width: 10px;
 
@function grid-width($n) {
	@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }

Il ne faut pas confondre les fonctions, avec les mixins, qui permettent de ré-utiliser des morceaux de codes.

La directive @media

SASS gère les médias queries d’une façon assez pratique, puisqu’elles peuvent être utilisées comme règles imbriquées.

1
2
3
4
5
6
.sidebar {
	width: 300px;
	@media screen and (orientation: landscape) {
		width: 500px;
	}
}

Donnera en CSS:

1
2
3
4
5
6
7
8
.sidebar {
	width: 300px;
}
@media screen and (orientation: landscape) {
	.sidebar {
		width: 500px;
	}
}

Cette fonctionnalité est intéressante, parce qu’elle permet de gérer de façon groupée, les styles dans les différents cas. Ces styles seront ensuite regroupés dans les média-queries lors de la compilation.

Commentaires sur ces fonctionnalités

En regardant cette liste de fonctionnalités, il semble que SASS prenne un avantage définitif sur LESS. Il faut cependant relativiser. En effet, si la notion de variable par défaut me semble être un réel avantage, les autres fonctionnalités, comme par exemple, les boucle @each, @while, ou la directive @media sont d’un intérêt limité pour la plupart des projets.

Les outils

Contrairement à LESS, qui dispose de plusieurs outils (un script Javascript), des binaires, …, l’utilisation de SASS se fait grâce à un unique outil qui fonctionne sous RUBY.

L’outil en question (que l’on appeler « compilateur »), est très complet, et permet un déboggage rapide, grace à des messages d’erreur exhaustifs. Les erreurs de syntaxe, qu’elles soient CSS ou SASS sont signalées. Par exemple

>>> Change detected to: \dev\htdocs\wp330\wp-content\themes\EG-New-Typo-v3\style.scss
error \dev\htdocs\wp330\wp-content\themes\EG-New-Typo-v3\style.scss (Line 9: Invalid CSS after "$bigger": expected selector or at-rule, was ": 1.15;")

Conclusion

Le langage de SASS est incontestablement plus complet que celui de LESS, avec notamment les valeurs par défaut pour les variables, les structures conditionnelles, les fonctions, et la gestion des media-queries.

Longtemps critiqués pour sa syntaxe trop éloignée de celle de CSS, les développeurs de SASS ont su corriger leur stratégie, et offrir une syntaxe, à la fois plus proche de celle de CSS, et finalement assez similaire à celle de LESS. Tout comme pour ce dernier, l’apprentissage de SASS est aisé.

Le compilateur est assez agréable à utiliser, avec de nombreuses options, et des messages d’erreurs clairs et détaillés. En ligne de commande, le mode « continu » (--watch), permet de développer une feuille de style SASS, sans rien changer du code HTML de notre site (chargement du fichier .css).

Faut-il donc abandonner LESS au profit de SASS? Pas forcement.

D’abord, l’utilité des fonctionnalités spécifiques à SASS, est relativement limitée pour la plupart des projets. Concrètement, je pense que seule la notion de variables par défaut est réellement intéressante. 

Ensuite, les deux produits proposent des approches différentes. Le choix entre SASS et LESS se fera également sur la stratégie de développement. Nous avons

  • d’un côté Javascript, un code « interprêté », une possibilité d’utilisation sans installation particulière,
  • et de l’autre Ruby, un code « traduit ou compilé » avant utilisation, et la nécessité d’installer Ruby (même si l’installation n’a rien de compliqué).

 Personnellement mon choix va vers SASS, principalement pour la notion de valeur par défaut. Cette fonctionnalité permet en effet de construire de véritables bibliothèques indépendantes et autonomes. 

Référence

Partager cet article