A la découverte de Sass – Syntactically Awesome Stylesheets

A la découverte de SASS – Syntactically Awesome StyleSheets

Vous en avez marre de dupliquer cinquante fois des lignes de CSS alors que votre fichier en fait déjà  8000, tout ça parce que vous avez un design qui sort un peu de l’ordinaire et qui demande pas mal de configurations.
Vous en avez marre de dupliquer le même morceau de code dans vos différentes classes et identifiants.
Vous en avez marre de devoir rechercher dans tous vos fichiers une couleur pour la remplacer par une autre.

Vous faites donc partie de ceux qui vont aimer Sass.

Mais qu’est ce que c’est ?

SASS est un méta-langage utilisé pour générer des feuilles de style au format CSS, ce qui veut dire que vous continuerez à avoir dans votre application du CSS. La seule différence est que les fichiers d’origine seront, dans la plupart des cas, moins lourds et plus intelligibles.
J’essaierai de vous présenter rapidement les possibilités de ce langage de script très intéressant sans rentrer dans les détails.

Fonctionnement

SASS utilise un langage de script appelé SassScript. Il existe au moment de l’écriture de cet article deux syntaxes différentes. Historiquement, la première de ces syntaxes est une syntaxe où les blocs d’instructions sont définis par l’indentation elle-même à la manière de Python par exemple. Les fichiers utilisant cette syntaxe sont des fichiers portant le format .sass.

1
2
3
4
5
$variable:#000000 ;
.classUn
border-color:$variable
.classDeux
padding:1px;

La seconde syntaxe, apparue plus récemment, utilise le formatage par blocs à la manière du CSS (chaque bloc étant délimité par des accolades et chaque ligne par un point virgule). Ces fichiers, eux, portent le format .scss.

$variable:#000000 ;
.classUn{
border-color:$variable
}
.classDeux{
padding:1px;
}

Les intérêts d’utiliser SASS

L’idée est tout simplement de se rapprocher au maximum des langages de programmation de type « paradigme objet ». De cette manière, il est possible de coder de façon plus concise. Cependant, en ajoutant une couche de programmation comme SASS, il faut ajouter la couche d’interprétation qui va avec. SASS fait alors intervenir son interpréteur en Ruby. Vous ne pourrez donc pas l’ajouter comme ça à votre projet car il vous faudra définir une étape d’interprétation des fichiers SASS au moment de la construction de votre projet.

Utilisation et concepts

Les Variables

Première chose très utile lorsqu’on utilise un langage de programmation quel qu’il soit, c’est de pouvoir déclarer des constantes et variables afin de centraliser les « propriétés » qui seront communes dans tout le programme. Ici, SASS ne déroge pas à la règle. La syntaxe est simple et l’on peut définir plusieurs types de variable. Le nom de la variable sera délimité par le caractère « $ » et le caractère « : ». Voici quelques exemples de déclaration.

/* Chaine de caratères */
$variable:top ;

/* Nombre */
$variable:2 ;

/* Booléen */
$variable:true ;

/* Unité */
$variable:1px ;

/* Couleur */
$variable:#000000 ;

L’imbrication

A la manière de CSS, il est possible d’imbriquer des blocs dans d’autres. Cependant, là où il peut être illisible de faire ça dans CSS, SASS apporte une nouvelle façon de faire qui rend le code plus court et plus facile à lire et surtout moins laborieux à écrire.

#sassEx p{
color: #00ff00 ;
width: 97% ;
.redbox{
background-color: #ff0000 ;
color: #000000 ;
}
}

Cela évite de déclarer

#sassEx p{
color: #00ff00 ;
width: 97% ;
}
#sassEx p.redbox{
background-color: #ff0000 ;
color: #000000 ;
}

L’héritage

Comme beaucoup de langages objet, SASS introduit et utilise lui aussi la notion d’héritage. De cette manière, il est plus facile de rajouter un attribut à une classe CSS sans pour autant répéter les autres attributs de la classe mère. Attention toutefois aux différentes répercussions sur votre design lorsque vous modifiez la classe mère.

.sassExParent {
background: #fdd ;
width: 97% ;
}
.sassExEnfant{
@extend .sassExParent ;
color: white ;
}

L’appel à la classe imbriquante

Le caractère magique ici est le « & ». Il va vous permettre d’appeler la classe englobante de votre bloc. De cette manière, vous n’aurez pas besoin de faire plusieurs blocs avec la classe si vous voulez effectuer un changement de design avec un :hover par exemple.

#sassEx {
color: black ;
a {
font-weight: bold ;
&:hover{
color: red ;
}
}
}

Factorisation de bloc

Pourquoi un fichier CSS devient-il si lourd à maintenir lorsque l’on a un design digne des plus grands sites ? Et bien tout simplement parce qu’il y a énormément de doublons dans du code CSS. On peut imaginer les borders de différentes classes devant être identiques, les margins etc. Et bien, ici, nous allons pouvoir factoriser le code très rapidement avec les commandes mixin et include. Mixin va en quelque sorte être votre déclaration de procédure.

/* Mixin nomProcedure */

Vous n’aurez ensuite qu’à inclure la procédure à l’aide de include afin que SASS ajoute lui-même les définitions. Et pendant qu’on y est, pourquoi ne pas simplifier encore plus le code pour éviter que le fichier soit trop lourd en séparant les procédures des définitions SASS. Comment me direz-vous ? Et bien tout simplement en ajoutant les procédures dans un fichier externe et en l’important dans le fichier des définitions.

/* Fichier a .scss */
@mixin class-inclusion {
th {
text-align: center ;
font-weight: bold ;
}
th, td {
padding: 2px ;
}
}
/* Fichier b .scss */
@import “a.scss”;
.sassEx {
@include class-inclusion ;
}

Le mot de la fin

Bien entendu, je n’ai présenté que les concepts de SASS. Il existe d’autres possibilités. Vous pouvez faire des opérations sur des variables, faire des boucles, des conditions, ajouter des arguments à vos procédures, etc… Donc énormément de possibilités et compatibles avec CSS3. De quoi ravir les plus curieux d’entre vous ! Et si vous n’êtes pas convaincu, il existe également LESS qui permet de faire le même genre de choses mais en JavaScript.

VN:R_U [1.9.22_1171]
Rating: +2 (from 2 votes)
Share
Ce contenu a été publié dans Non classé, avec comme mot(s)-clef(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

5 réponses à A la découverte de Sass – Syntactically Awesome Stylesheets

  1. mgrenonville@excilys.com dit :

    Regarde aussi du côté de Compass (celui qui fait du style pas Compass qui indexe) http://compass-style.org/, il s’agit d’une extension de SASS, notamment un ensemble de mix-ins.

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Cyril Brouillard dit :

    Il existe également BluePrint comme framework CSS sympa : http://blueprintcss.org/

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. Julien Pladeau dit :

    Merci pour ces deux pistes :)

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. psimon@excilys.com dit :

    Pour info, Liferay depuis la 6.1 support nativement SASS et Compass.
    Ce que je connais de Compass (construit au dessus de SASS), est que ça aide à créer du CSS qui va inclure les spécificités de chaque navigateur.

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. Ping : Maintenabilité et performance avec Sass et Compass | ELAO | Le blog technique

Laisser un commentaire