• Rails
• CSS
• News
• 

SASS, la réinvention du CSS

Vous vous rappellez de haml? Là, on va vous parler de son petit frère SASS (Syntactically Awesome StyleSheets), inutile de vous expliquer son installation c'est détaillé dans ce post. Il s'installe par défaut avec haml.

Pour utiliser SASS dans vos CSS, créez un répertoire SASS sous /public/stylesheets et placez y vos fichiers ".SASS"

Quand on suit le principe du "cascading" (cascade) des feuilles de style, on se pose la question : Mais pourquoi les CSS n'ont pas eu l'idée d'utiliser la même structure de SASS en arborescence, ça aura était plus facile à éditer et à modifier ??, peut-être que le prochain CSS4 appliquera la nomenclature de SASS.

Voyons quelques exemples:
Comme avec haml le symbole "#" traduit un identificateur "id" et le "." (point) une Classe "class"

#paragraphe p  :color red  :width 100%

#paragraphe p {  color: red;  width: 100%; }

A première vue, on s'économise l'écriture des accolade "{}" et des ";" qui causaient des problèmes par oubli.
Les ":" ont changé de fonction et d'emplacement, dans les exemples suivants on comprendra le pourquoi.

Le deuxième exemple est un cas concré qui justifie l'existence de SASS.
Tout comme haml, la structure en arborescence de sass utilise le décalage à droite avec deux caractéres "espace" pour définir les noeuds de l'arbre.

#article  :width 100%
  p, div    :font-size 2em
    a    :font-weight bold
  pre    :font-size 3em

#article {
  width: 100%;
 }
  #article p, #article div {
    font-size: 2em;
 }
  #article p a, #article div a {
    font-weight: bold;
 }
  #article pre {
    font-size: 3em;
 }

Dans cet exemple on n'a utilisé que deux niveaux d'imbrication. En css classique, on se trouve obligé de réécrire tout la structure de chaque branche jusqu'à la racine pour chaque style. Le jour où on décide de changer le nom de la classe ou de l'identification, ça ne sera pas facile, sans parler d'une intégration d'un style parent tout prés de la racine.

Un autre exemple particulier pour les hyperliens

a
  :font-weight bold
  :text-decoration none
  &:hover
    :text-decoration underline
  &:visited
    :color black

a {
    font-weight: bold;
    text-decoration: none;
 }
a:hover {
    text-decoration: underline;
 }
a:visited {
    color:black;
 }

Pour de simples feuilles de style de quelques dizaines de lignes, on peut s'en passé de SASS. Mais pour des projets d'envergure avec des interfaces et templates complexes, SASS devient une necessité.
De même pour l'organisation de la structure; il est plus facile de retrouver le style à changer. Sur des fichiers en CSS qui dépassent les 50ko (j'en ai vu beaucoups), on à tendance à rajouter des styles imbriqués à la fin du fichier dans la précipitation. On se retrouve avec du code éparpillé. La roulette de la souris et l'ascenceur de l'éditeur chauffent et nos yeux se fatiguent plus vite à la recherche des relations de positionnement : absolute, relative,... et ce n'est qu'un simple cas parmi d'autre quand on commence à se frotter la tête et ouvrir l'éditeur en plein écran en réduisant la taille du caractère... D'ailleurs on a trouvé comment charger encore plus les CSS par des commentaires utilisés comme repères

SASS nous réserve encore d'autres surprises, l'utilisation de constantes, d'opérations arithmétiques dans une feuille de style, un sacré gain de temps à la conception et à la maintenance

Voici un exemple tiré directement du site officiel de haml-sass

!main_width = 10
!unit1 = em
!unit2 = px
!bg_color = #a5f39e
#main
  :background-color = !bg_color
p
  :background-color = !bg_color + #202020
  :width = !main_width + !unit1
img.thumb
  :width = (!main_width + 15) + !unit2

#main {
    background-color: #a5f39e;
 }
#main p {
    background-color: #c5ffbe;
    width: 10em;
 }
#main img.thumb {
    width: 25px;
 }

Le jackpot !!!, on a l'impression d'avoir un tableur avec des formules arithmétiques dans les cellules en CSS pour calculer automatiquement une mise en page. Plus la peine de recréer un CSS pour l'impression ou d'autre supports médiatiques.

Place à votre imagination pour étendre des combinaisons inimaginables.
Désormais, l'écriture n'est plus un exercice fastidieux, mais une épreuve d'intelligence et d'imagination

Il reste encore d'autre fonctions très interessante que j'essayerais d'exposer dans un futur post