khaled salmouk

Le CSS c’est cool, mais avec Sass et LESS c’est mieux

Le CSS c’est cool, mais avec Sass et LESS c’est mieux.

Pourquoi ? Le but de cet article est de vanter les mérites de LESS et Sass (Syntactically Awesome Stylesheet), deux langages de génération dynamique de CSS.

Ces deux préprocesseurs CSS permettent uniquement d’améliorer la syntaxe du langage sans toucher à ses fondamentaux ni à ses possibilités qui sont dépendants du standard défini par le W3C.

Pourquoi utiliser un préprocesseur CSS ?

Les préprocesseurs CSS permettent d’optimiser le code en amont et sont transparents pour le navigateur et donc pour l’utilisateur (rendez vous sur un site qui utilise Sass ou LESS et inspecter l’élément, vous ne verrez que le CSS généré).

Installation et utilisation

LESS est implémenté en JavaScript. Il faut créer un fichier .less et charger un script JavaScript sur la page pour apporter le style à la page. Par conséquent sans javascript, pas de styles.

Il est également possible de compiler systématiquement les fichiers .less grâce à des GUI comme SimpLESS (multi OS) / Crunch (multi OS) / CodeKit (Mac) / WinLESS (Win) pour inclure le fichier CSS précompilé dans la page et éviter l’appel JavaScript.

Sass est implémenté en Ruby. Il est nécessaire d’installer Ruby pour pouvoir installer la gem Sass (Edit 10/08/2015 – merci Olivier : Il est maintenant possible de profiter de SASS sans Ruby grâce à libSASS qui est écrit en C. Il existe également une version ‘wrapper’ Node.js : Node-SAAS). Il existe également des outils pour compiler les fichiers en .CSS à chaque sauvegarde automatiquement (Compass.app (Win, Mac) / LiveReload (Win, Mac) / CodeKit (Mac)).

Fonctionnalités et particularités

LESS utilise l’extension .less tandis que Sass propose deux formats de fichiers : le .scss (Sassy CSS, CSS fougueux… !) et le .sass (inspiré par HAML). Les fichiers .sass sont identiques aux fichiers .scss mais les accolades sont remplacées par des tabulationx et les points-virgules par des retours à la ligne.

Variables

LESS et Sass permettent de stocker des constantes dans une variable précédée de @ pour LESS et $ pour Sass.

L’utilisation de @ pour LESS peut toutefois paraitre troublante car elle n’a rien à voir avec l’utilisation de @ pour la déclaration de media queries (@media) où pour la création d’animations (@keyframes).

Il y a une petite différence entre LESS et Sass. Quand on surcharge une variable globale localement, la variable globale prend la valeur locale, ce qui n’est pas très intuitif :

.scss
1
2
3
4
5
6
7
8
9
10
$color: red;
.classe-a {
  $color: blue;
  color: $color;
}
.classe-b {
  // LESS = red (global)
  // Sass = blue (surchargée par la variable locale)
  color: $color;
}

Imbrication

LESS et Sass permettent d’imbriquer du code de la même manière :

1
2
3
4
5
6
nav {
  width: 940px;
    ul {
    padding: 0;
  }
}

est compilé en

.css
1
2
3
4
5
6
nav {
  width: 940px;
}
nav ul {
  padding: 0;
}

Cependant, Sass va plus loin en permettant d’imbriquer des propriétés :

.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
nav {
  width: 940px;
  ul{
    padding: 0;
  }
  border {
    style: solid;
    right {
      width: 2px;
      color: $color;
    }
  }
}

est compilé en

.css
1
2
3
4
5
6
7
8
9
nav {
  width: 940px;
  border-style: solid;
  border-right-width: 2px;
  border-right-color: red;
}
nav ul {
  padding: 0;
}

Il est également possible d’imbriquer des media queries, ce qui permet de voir bien plus simplement les différences d’affichage entre le style original et le style responsive :

1
2
3
4
5
6
.classe-a{
  // style original
  @media (max-width: 800px) {
  // style responsive
  }
}

Mixins

CSS ne supporte pas encore les mixins. Un mixin est une classe destinée à être composée par héritage multiple avec une autre classe pour lui apporter des fonctionnalités.

C’est un cas de réutilisation d’implémentation. Ils permettent ainsi une meilleure maintenabilité du code car il suffit de modifier le code à un seul endroit.

Ici aussi, les syntaxes sont différentes entre LESS et Sass. Sass utilise @mixin et less utilise la déclaration de classe :

.scss
1
2
3
4
5
6
@mixin bordure($valeur) {
  border-radius: $valeur;
}
nav {
  @include bordure(10px);
}
.less
1
2
3
4
5
6
.bordure(@valeur) {
  border-radius: @valeur;
}
nav {
  .bordure(10px);
}

Bien entendu, les mixins sont utilisables sans paramètres. Une fois de plus, Sass va un peu plus loin avec l’héritage de sélecteurs. Plus besoin de copier/coller tous les styles d’un sélecteur dans un autre, il y a @extend :

.scss
1
2
3
4
5
6
7
.classe-a {
   width: 100px;
}
.classe-b {
   border: 1px solid $red;
   @extend .classe-a;
}

est compilé en

.css
1
2
3
4
5
6
.classe-a, .classe-b {
   width: 100px;
}
.classe-b {
   border: 1px solid $red;
}

Contrairement à LESS, avec @extend Sass ne duplique pas le code de .classe-a dans .classe-b, le sélecteur .classe-a est altéré en .classe-a, .classe-b et seuls les styles particuliers à .classe-b y restent.

Opérations mathématiques / logique & boucles

Maths

.scss
1
2
3
4
$marge: 20px;
div {
  margin: $marge - 10%;
}

Ici il y aura une erreur de compilation sur la marge en Sass car les unités sont différentes mais LESS garde la première unité en référence, c’est à dire que le code est équivalent à 10px – 10px = 0px. Oui, c’est bizarre mais c’est comme ça !

.scss
1
2
3
$bleu= #0000FF;
$bleuclair= lighten($blue, 10%);
$bleufonce= darken($blue, 10%);

L’exemple ci-dessus montre également comment aller plus vite, plus besoin de chercher 1000 couleurs pour faire des dégradés, les fonctions lighten et darken sont là pour ça !

Logique & boucles

LESS et Sass permettent d’insérer de la logique dans le code :

.less
1
2
3
4
5
6
7
8
9
10
.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
  background-color: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
  background-color: white;
}
.classe-a {
  color: #BADA55;
  .set-bg-color(#BADA55);
}
.scss
1
2
3
4
5
6
7
8
9
10
11
@mixin set-bg-color($color) {
  @if lightness($color) >= 50% {
    background-color: black;
  } @else {
    background-color: white;
  }
}
.classe-a {
  color: #BADA55;
  @include set-bg-color(#BADA55);
}

Ici, on adapte le background de .classe-a en fonction de la clarté du texte. Si le texte est clair on met un background blanc, sinon noir.

On remarque que Sass est plus intuitif et permet d’utiliser des conditions de type if/if else/else, ce qui est bien plus lisible que ce que LESS a à offrir. Il en est de même avec les boucles, Sass est plus robuste et même si nous sommes d’accord que les boucles en CSS ce n’est pas indispensable, il est toujours pratique de savoir que ça existe : Sass permet de faire des boucles de type @for, @each, @while :

.scss
1
2
3
4
5
6
$columns: 4;
@for $i from 1 through $columns {
  .cols-#{$i} {
    width: ((100 / $columns) * $i) * 1%;
  }
}

est compilé en

.css
1
2
3
4
5
6
7
8
9
10
11
12
.cols-1 {
  width: 25%;
}
.cols-2 {
  width: 50%;
}
.cols-3 {
  width: 75%;
}
.cols-4 {
  width: 100%;
}

A noter qu’on a ici utilisé la concaténation, qui marche à merveille avec Sass en utilisant tout simplement #{$ma-variable}.

LESS ne permet pas exactement de faire des boucles, on doit utiliser une fonction récursive et oui, ce n’est pas idéal :

.less
1
2
3
4
5
6
7
8
9
10
11
12
13
@columns: 4;
.loopWidthColumn (@i) when (@i > 0) {
  (~".cols-@{i}"){
    width: ((100 / @columns) * @i) * 1%;
  }
  // Fonction récursive qui s'appelle elle même
  .loopWidthColumn (@i - 1);
}
// on arrête la boucle
.loopWidthColumn  (0) {}</p>
<p>// 1er appel de la boucle
.loopWidthColumn  (@columns);

Extensions

LESS et Sass ont tous les deux des extensions disponibles pour faciliter le développement.

La principale extension pour Sass est Compass. Compass met à disposition de nombreux mixins pour écrire du CSS plus vite mais pas seulement. Il propose également des helpers, layouts, aides à la typographie, système de grille, des sprites pour les images, etc. En résumé, il y a tout ce que vous cherchez dans Compass !

LESS a de nombreuses extensions mais contrairement à Sass, elles n’ont rien à voir entre elles et sont développées par des équipes distinctes : il faut prendre du temps pour choisir ce dont on a besoin. Parmis les plus importantes :

Par exemple en utilisant Sass avec le framework Compass, vous obtenez un mixin background qui permet d’éviter d’avoir à gérer les problématiques cross browser avec les vendor prefixes :

.scss
1
2
3
4
5
6
7
.classe-a {
  @include background(
    image-url("foo.png"),
    linear-gradient(top left, #333, #0c0),
    radial-gradient(#c00, #fff 100px)
  );
}

est compilé en

.css
1
2
3
4
5
6
7
8
.classe-a{
  background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
  background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}

Magnifique, hein?

Conclusion

L’utilisation de préprocesseurs CSS permet de mettre en place une optique DRY (Don’t Repeat Yourself) dans le code grâce aux mixins et à l’imbrication du code.

Ils sont très utiles bien que pas indispensables si vous travaillez sur des projets de petite envergure.

L’utilisation de variables, de boucles et de logique, les extensions disponibles et la facilité d’installation et de prise en main sont autant d’arguments en faveur de l’utilisation d’un préprocesseur CSS.

Il semble que Sass soit plus mature et plus intuitif que LESS et son utilisation avec Compass est un bonheur bien que moins évident à prendre en main que LESS.

Bien entendu il vous reste à lire les docs pour vous rendre compte de la puissance de ces préprocesseurs, je n’ai montré ici qu’une infime partie de ce qu’il est possible de faire!

Le mot de la fin : LESS est plus adapté aux débutants, Sass est plus high-level, mais si vous utilisez déjà LESS, pas de panique au moins vous préprocessez!

Pour commencer avec LESS, c’est ici.

Pour Sass, c’est  ou pour des super tutos avec Compass.

Publicités
SALMOUK KHALED

Quel préprocesseur CSS utilisez-vous ?

Bonjour à tous ! Un préprocesseur CSS vous aide dans l’écriture de vos feuilles de styles. Qu’apporte t’il et faut-il l’utiliser ?

Le but n’est pas de dire « utiliser un préprocesseur CSS c’est mal, il faut coder en dur ! » ni « les préprocesseurs css c’est génial, il ne faut plus coder en dur ! »

Je veux juste vous démonter à quel point ces préprocesseurs représentent un gain de temps important dans un développement web. Pour cela, je vous propose un petit tour d’horizon de ces machines de guerre taillées pour le CSS.

Qu’est-ce qu’un préprocesseur CSS ?

Un préprocesseur CSS est un « programme » ou module sous Node.js  (pour Less et Sass) qui interprète votre code source pour générer un code standard du web : le CSS. Ce sont des générateurs dynamiques de CSS.

LESS et Sass (Syntactically Awesome Stylesheet) sont les préprocesseurs CSS les plus utilisés, ils permettent d’améliorer la syntaxe du langage en préservant ses fondamentaux, ses possibilités et sa conformité W3C.

Voici un exemple concret :

compass

Après la compilation :

compilé css

Et le CSS ?

Pour les novices, CSS est un langage dit descriptif qui vous permet de styler vos pages web par le biais de règles de styles. Cependant CSS3 connait encore quelques limitations, notamment l’utilisation de variables comme « $menu ».

Pour commencer, les variables

Less, SASS ou encore Stylus permettent de stocker des constantes qui seront interprétées par le préprocesseur choisi.

Les variables s’écrivent ainsi :

variables

Ce qui peut paraître déroutant lorsque l’on découvre un préprocesseur, c’est de découvrir des constantes de variables précédées de @ pour LESS et $ pour Sass. Le dollar étant aussi utilisé pour les variables PHP et le @ l’est aussi pour l’import en CSS classique.

Le Nesting

Les préprocesseurs Less, SASS ou encore Stylus permettent d’imbriquer du code de la même manière. Avec Sass il est également possible d’imbriquer des propriétés, ce que Less ne permet pas.

Un css classique

gif css

Un fichier SASS

nesting gif

Les Mixins

Ces dernières vous facilitent grandement la vie. C’est en quelque sorte un système de Classe qui permet une simplification dans l’écriture de vos CSS.

Je m’explique : Comme vous le savez, Internet Explorer est mort (ouf !) mais ce dernier a fait beaucoup de mal pendant son existence ! Grace aux mixins vous pouvez faire du préfixage de certaines règles de styles qui ne sont pas encore complètement implémentées dans les navigateurs dit « modernes ». C’est la base du DRY, le Don’t Repeat Yourself.

mixins

Cependant le préprocesseur css va plus loin avec @extend qui étend une classe css.

Les Opérations mathématiques & logiques

math

Ces derniers permettent d’utiliser les opérateurs mathématiques. Ah ouais vous allez me dire ! et bah oui ! ces machines de guerres vont directement calculer vos colonnes pour vous faire une petite grille rien qu’à vous !

Le seul point négatif est le risque de mélanger les pixels avec des valeurs en pourcentage.

Les extensions

Pour Sass, il existe un framework nommé Compass qui vous permet de faire des sprites pour vos images mais pas seulement ! Compass permet l’utilisation d’@include, vous bénéficiez alors d’un préfixage pour les vieux navigateurs, ce qui n’est pas négligeable avec IE.

Vous avez également Susy, une extension juste géniale ! Susy permet de faire une grille sans passer par un système de classe à la Twitter bootstrap. Cela permet de mieux contrôler son css car il n’est pas codé en dur directement dans le html.

Mais rassurez vous pour Less, il existe CSScomb, clean-css ou encore Autoprefixer !

Conclusion

Comme vous avez pu le lire, l’un des intérêts d’un préprocesseur CSS est de vous simplifier la vie mais attention, il ne faut pas viser uniquement la facilité, vous risquerez de générer un code CSS pourri.

Attention, si vous faites un mauvais usage des préprocesseurs css, vous allez progressivement perdre vos connaissances en CSS pur et dur. Prenez votre temps et ne perdez jamais de vue les fondamentaux, c’est très important.

Je vous recommande de travailler sur la syntaxe et vous verrez ce que ces bijoux peuvent vous apporter. Testez Can I use , vous verrez, c’est fait pour vous !

Vous pouvez aussi en profiter pour découvrir les préprocesseurs HTML style Jade qui permettent cette simplification propre aux préprocesseurs.

Et vous ! Quel préprocesseur CSS utilisez-vous ?