Malgré sa syntaxe simple, cela peut paraître difficile d’organiser du CSS. De plus les navigateurs n’arrangent pas les choses en créant des propriétés qui leurs sont propres. Rassurez-vous, il existe des solutions ! Le seul inconvénient, c’est qu’une fois essayées, on ne peut plus s’en passer…

Pour répondre aux limites du CSS, des surcouches ont été créées pour donner de nouvelles possibilités dans l’écritures des feuilles de styles. Les plus utilisées aujourd’hui sont SASS (Syntactically Awesome StyleSheets) et LESS

Tous les deux sont des languages compilés qui permettent de générer des feuilles de styles .css classiques et lisibles par tous les navigateurs.

  • SASS propose deux formats de fichier : le .sass et le .scss avec une deux différences : pour écrire en .sass, il n’y a ni accolade, ni point-virgule. Cependant, pour remplacer ces deniers, il y a des retours à la ligne et des tabulations.
  • LESS, quant à lui, propose un seul format : le .less. Sa syntaxe est plus proche du scss.

[tagline]Leurs objectifs communs[/tagline]

  • Pas de répétition, que ce soit dans la sélection d’une balise, comme dans les propriétés, respecter le principe [label color= »green »]DRY (Do not Repeat Yourself)[/label],
  • Gagner du temps,
  • Ecrire un code lisible
  • Bénéficier de librairies de styles aisément personnalisables.

[tagline]Leurs apports[/tagline]

Structuration

La première amélioration est l’imbrication des sélecteurs. Une bonne pratique est d’utiliser cette imbrication pour rassembler des propriétés css d’un même élément (par exemple, un bouton) et non s’en servir pour toute l’arborescence d’une page.

Variabilisation

Vous avez choisi un rose fuschia pour vos liens, pour vos listes, pour vos citations… ah et également pour vos classes importantes. Malheureusement pour vous, votre client préfère le vert pomme. Pour être sûr de faire le bon changement partout sans oublier une propriété, il suffit dorénavant de déclarer une seule fois votre couleur.

Qui dit variable dit …

Fonctions

Mathématicien(ne) dans l’âme ? Toutes les opérations sont permises : additions, divisions…
Vous aurez également à votre disposition des fonctions permettant de changer le ton, la saturation et/ou la luminosité d’une couleur.

Vous pouvez aussi créer vos propres fonctions, dans ce cas nous parlerons de [label color= »green »]mixins.[/label]

Il existe encore d’autres améliorations que vous pouvez découvrir sur les sites officiels.

[tagline]Compilation[/tagline]

Pour obtenir vos css à l’aide de vos fichiers sass et less, il faut les compiler.

Pour Sass, il est nécessaire d’avoir Ruby d’installé. Vous pouvez ainsi installer la gem ‘sass’ en ligne de commande :
[code_text]gem install sass[/code_text]
Puis une fois que vous avez créé votre fichier sass, la ligne de commande suivante vous permettra de le compiler :
[code_text]sass –watch style.scss:style.css[/code_text]
Après l’éxécution de cette commande, tous changements sur le fichier style.scss sera automatiquement pris en compte et recompiler en css.

Pour Less, il existe des applications comme {Less} ou SimpLess qui compile automatiquement vos fichiers less.
[hero_unit hero_title= »SASS VS LESS »][/hero_unit]

Pour finir un parfait exemple d’utilisation de SASS

https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_button.scss
Ce mixin permet de générer les propriétés de fond, de bordure, d’ombre, de texte et d’espacement d’un bouton à l’aide d’un seul paramètre : sa couleur !!

Sites officiels :
[list_wrap list_type= »arrow »]
[list_item]Less : http://lesscss.org/[/list_item]
[list_item]Sass : http://sass-lang.com/[/list_item]
[list_item]SimpLESS : http://wearekiss.com/simpless[/list_item]
[list_item]{Less} :http://incident57.com/less/[/list_item]
[/list_wrap]

Pour en savoir plus sur les bonnes pratiques : https://speakerdeck.com/u/chriseppstein/p/fowd-stylesheet-organization-with-sass