SASS / COMPASS – Styliser votre CSS

SASS pour Syntactically Awesome Stylesheets, est une extension du langage CSS.
Il lui ajoute des fonctionnalités propres aux langages de programmation comme les variables, les fonctions, les conditions, les boucles ... Noooonn ne fermez pas la page de votre navigateur.

Présentation générale

La technologie SASS dispose de deux syntaxes bien distinctes, le SCSS et le SASS 

La syntaxe SCSS pour Sassy Cascading Stylesheets, est la plus utilisée, son extension de fichier est .scss.

wordsass.PNG

La syntaxe SASS s’affranchit des accolades, points virgules et autres crochets, contrairement au SCSS, cette syntaxe fonctionne avec l’indentation (ce qui peut être très déroutant pour des personnes utilisant des langages de programmation) comme le montre l’exemple ci-après :

wordsass2.jpg

Pré-requis

- Une bonne connaissance du HTML et du CSS.

Avantages 

- Permet une écriture beaucoup plus claire et organisé du CSS
- L’ajout de fonctionnalités permettant d’optimiser le  code (les variables et les mixins pour ne citer qu’eux)

Inconvénients

- Potentiellement problématique sur un projet nécessitant plusieurs intégrateurs ou développeurs ne maitrisant pas tous SASS.

Installation – La méthode ligne de commande

Avant d’utiliser SASS et COMPASS, nous devons impérativement installer Ruby sur notre machine.

Pour les utilisateurs de Mac, Ruby est installé par défaut.

Nos amis Linuxien pourront utiliser le gestionnaire de paquet.

Quant aux fidèles utilisateurs de Windows, ils ont à leur disposition le RubyInstaller (http://rubyinstaller.org/), voyons comment l’installer.

Rendez-vous dans la rubrique « Download » et téléchargeons la dernière version du RubyInstaller, il s’agit de la 1.9.3-p362 au moment où j’écris ces lignes.
Une fois télécharger, faisons un double clic sur l’exécutable.

Dans la fenêtre Installation Destination an Optional Tasks, veillez à ce que la case devant Add Ruby executables to your PATH soit cochée, cela vous permettra d’utiliser les fonctionnalités de Ruby directement dans le terminal de Windows.

Veillons également à choisir un répertoire d’installation ne contenant pas d’espace (ex : programme Files), cela peut engendrer des bugs.

Installation_de_Ruby.PNG

Une
fois l’installation terminée, nous devons nous assurer 
quelle s’est déroulée
de manière correcte, pour cela, ouvrons le terminal de Windows et écrivons
cette commande.

Help_1.PNG

Nous obtenons ceci :

Help_2.PNG

Maintenant il est temps d’installer SASS, exécutons cette commande :

Installation_de_SASS_1.PNG

Au bout de quelques secondes, voici ce que nous obtenons :

Installation_de_SASS_2.PNG

Pour installer la librairie COMPASS, exécutons cette commande :

Installation_COMPASS_1.PNG

Au bout de quelques secondes, nous devrions obtenir ceci :

Installation_COMPASS_2.PNG

Voilà, notre installation est terminée, maintenant vérifions que tout fonctionne bien :

- Créons dans notre répertoire de travail un dossier « scss » et un autre « css ».

Dans notre dossier « scss » créons un fichier « gen.scss ». 

- Pour permettre la compilation de nos fichiers  en css, nous allons créer un fichier texte tout simple dans lequel nous allons écrire ceci : sass --watch scss:css. Le nom du fichier importe peu, nous devons juste lui donner l’extension .bat et de ne pas oublier de l’exécuter à chaque fois que nous travaillerons sur le projet.

- Exécutons ce fichier .bat. Au bout de quelques secondes, vous devriez avoir ce message :

Polling.PNG

- Vous n’avez plus qu’a édité votre fichier .scss et de l’enregistrer, vous devriez obtenir une notification de mise à jour de votre fichier CSS.

Si votre fichier n’est pas compilé correctement à cause d’une erreur de syntaxe par exemple, vous aurez un message d’erreur en haut de vos pages vous indiquant la ligne qui pose problème, plutôt pratique.

Installation – La méthode interface graphique

L’alternative à la ligne de commande et de télécharger un des logiciels suivant :
Scout http://mhs.github.com/scout-app/ (gratuit, mac / window / linux)
Fire.app http://fireapp.handlino.com/ (14 $, mac / window /linux)
Codekit http://incident57.com/codekit/ (25 $, mac)

Découvrons Scout qui présente l’avantage d’être gratuit.

Scout_1.PNG

La prise en main est rapide grâce à son interface intuitive.

Dans un premier temps, nous devons créer un projet qui est en fait notre répertoire de travaille.

Stylessheet Directories dans la partie «Configure» nous permet de sélectionner un dossier «d’entrée», ce dernier contiendra nos fichiers .sass ou .scss.

Comme vous devez vous en douter, le dossier de «sortie » contiendra nos fichiers .css qui auront été compilé par Scout.

Une fois que nous aurons créé un premier fichier .sass ou .scss, appuyons sur le bouton «Play» et commençons notre intégration.

scout2.PNG
Nous pouvons également sélectionner les dossiers contenant nos fichiers .js, nos images ainsi que nos fichier de configuration au format .rb, ce fichier nous sera nécessaire si nous souhaitons activer certaines fonctionnalités de Compass.

Maintenant imaginons que nous ayons terminé notre intégration, nous sommes sur le point de déployer notre site… mais… je n’ai pas forcément envie que tout l’Internet puisse accéder à mes feuilles de styles.

Le mode de sortie (Output Modes) ne va pas rendre inaccessible notre .css, il va rendre sa lecture très difficile en modifiant son affichage, vous avez le choix entre plusieurs mode d’affichage.

Nested (défaut) : 
Formatage normal, indentation régulière et code agréable à lire ;

Compact : 
Formatage monoligne, moins agréable à lire mais toujours compréhensible ;

Expanded : 
Comme son nom l’indique, code très étendu et aéré ;

Compressed : 
Utile pour la production uniquement, mais illisible.

SASS en détails

L’imbrication
L’imbrication permet de simplifier le code et de gagner en lisibilité.
Au lieu de spécifier la totalité du sélecteur pour indiquer à quel ancêtre est rattaché l’élément visé, il suffit d’inclure le bloc de déclaration enfant dans le bloc ancêtre.

Imbrication.PNG



L’héritage
L’héritage permet d’appliquer toutes les propriétés d’une classe A à une classe B.
Pour ce faire, il suffit simplement d’indiquer le nom de la classe A dans le bloc de déclaration B.

Heritage.PNG


L’import
Permet l’importation de propriété SCSS ou SASS écrites dans un ou plusieurs fichiers.
Il est possible de compiler l’ensemble en un ou plusieurs fichiers CSS.

Import.PNG

Variable
Les variables permettent de définir une seul fois une valeur utilisée en plusieurs endroits. Il peut s’agit d’une suite de caractères, d’un code hexadécimal ou encore d’une valeur numérique. Elle est précédé du caractère @.

Variable.PNG

Mixins
Les mixins permettent à l’instar des variables de définir une seul fois un bloc de code. Il peut s’agir par exemple d’une déclaration de police de caractère que l’on serait forcé de dupliquer à plusieurs reprises dans le code CSS. 

Mixins.PNG

Compass

Compass est un framwork créé par Chris Eppstein proposant une bibliothèque complète de Mixins vous permettant d’inclure très facilement des fonctionnalités avancé de CSS3 comme par exemple les box-shadow :

box-shadow


Les préfixes propriétaires seront ajoutés lors de la compilation, ce qui donne ceci :
box-shadowCSS.PNG
Reset CSS, Font-face, CSS3 Pie, Compass intègre de nombreuses fonctionnalités toutes détaillées de manières exhaustives sur http://compass-style.org.

Ressources
Le site officiel du langage  

La librairie Compass 

Un commentaire

  1. Bonjour,
    J’ai un module _variables.scss :
    $mont: « Montagnes »;
    $roc: « Paysage rocailleux »;
    $bois: « Forêt enneigée »;
    dans le module _main.scss :
    @include keyframes(caption2) {
    0% { content: $mont; }
    32% { content: $mont; }
    33% { content: $roc }
    65% { content: $roc }
    66% { content: $bois; }
    98% { content: $bois; }
    99% { content: $mont; }
    100% { content: $mont; }
    }
    dans le css généré :
    @-moz-keyframes caption2 {
    0% {
    content: « Montagnes »; }
    32% {
    content: « Montagnes »; }
    33% {
    content: « Paysage rocailleux »; }
    65% {
    content: « Paysage rocailleux »; }
    66% {
    content: « For├¬t ennig├®e »; }
    98% {
    content: « For├¬t ennig├®e »; }
    99% {
    content: « Montagnes »; }
    100% {
    content: « Montagnes »; } }

    Apparemment, il a traduit ê par ├¬ et é par ├®.
    Je ne sais pas comment il fait, mes versions
    compass (1.0.3)
    compass-core (1.0.3)
    compass-import-once (1.0.5)

    sass (3.4.22)
    Si vous avez une idée ?
    Cordialement

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *