Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Découverte de SASS et Compass

Par Etienne GAUTIER Publié le 23/07/2015 à 19:17:15 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Bonjour, les sites en général utilisent une mise en page de plus en plus complexe et l'on se retrouve vite perdu dans un projet avec des feuilles de style très longues et désorganisées. SASS a été créé dans le but de simplifier au maximum nos règles CSS.

SASS ( | SCSS) est un langage de type préprocesseur qui permet d'organiser et de faciliter la rédaction du CSS, il permet de déclarer des variables par exemple ou encore de bénéficier de la clartée d'un code imbriqué plutôt qu'une liste de rêgles.

Compass est un outil qui va améliorer et faciliter l'utilisation de SASS, c'est un 'couteau suisse' du web qui est utilisé notamment pour assurer la compatibilité des navigateurs pour une page.

Par exemple ci-dessous en comparant un code SCSS et un code CSS pour le même résultat, on peut clairement remarquer grâce à l'imbrication que la div "container" se situe dans la navbar et ce sans aller le vérifier dans le fichier .html contrairement au code CSS.

Il faut savoir cependant que l'utilisation de SASS ce n'est pas substituer le CSS, il va simplement se charger d'écrire le CSS à notre place.

Installation

Pour ce faire, il faut d'abord installer Ruby pour ceux qui ne l'ont pas déjà.

Installation de Ruby

Mac

Ruby est déjà présent nativement sur Mac

Windows

Ruby peut être installé avec RubyInstaller http://rubyinstaller.org

Linux

$ sudo apt-get install ruby

$ sudo yum install ruby

Installation de SASS et Compass avec Ruby

$ gem install sass

$ gem install compass

Voilà ! Vous êtes prêts.

Manipulation de SASS et Compass

On commence par créer un nouveau projet Compass : $ compass init

et l'on obtient plusieurs fichiers :

Le dossier "stylesheets" va contenir le CSS généré et nous allons écrire dans le dossier "sass". On peut voir qu'il contient déjà quelques fichiers générés à titre d'exemple.

Le fichier config.rb est notre fichier de configuration:

il contient la résolution des liens vers les différents fichiers du projet compass ainsi que différentes options comme 'output_style' qui sert à définir la forme du CSS en sortie. Par exemple ":expanded" conviendrait pour un fichier de développement alors que ':compressed' pour un fichier de production étant donné la suppression des espaces et des commentaires.

Création de son fichier SCSS

On va maintenant créer notre fichier scss "style.scss" dans le répertoire "sass" et créer une page quelconque "index.html" à la racine du projet.

Mais avant, quelle est la différence entre SASS et SCSS ? Il s'agit de deux syntaxes et l'on peut facilement passer de l'un à l'autre avec les commandes $ sass-convert style.scss style.sass et $ sass-convert style.sass style.scss . Cela donne strictement le même résultat mais le scss est plus agréable et plus intuitif.

On va commencer par mettre quelques rêgles basiques dans notre fichier style.scss:

Puis une structure basique dans notre index:

On voit que la page fait appel à un fichier inexistant nommé "style.css", c'est parce que ce fichier n'a pas été généré encore, pour cela on va taper la commande $ compass watch . Aussitôt, Compass va analyser notre répertoire "sass" en temps réel et générer tout le css correspondant. On peut alors laisser tourner la commande en tâche de fond et se mettre au travail.

Notre CSS a été généré et on a le résultat espéré lorsque l'on ouvre notre page dans le navigateur.

NB : Dans le cas des imbrication il est conseillé de ne pas dépasser trois niveaux pour un souci de clarté de code.

La modularité

L'intérêt d'utiliser SASS/Compass c'est aussi d'avoir la possibilité de diviser son code en plusieurs 'morceaux'.

Par exemple si dans mon répertoire scss je souhaite faire un fichier "fonts.scss" dans lequel j'indique toutes les polices de mon projet, je peux faire en sorte qu'il ne soit pas généré par Compass en lui ajoutant un underscore ce qui donne "_fonts.scss". Je peux alors choisir de l'inclure dans mon style.scss par exemple pour qu'il agisse sur mon index.html, pas besoin de préciser l'underscore lors de l'inclusion :

L'intérêt étant de créer ses propres "vendors" avec ses constantes, ses ressources et de les appeler dans les fichiers souhaités. On obtient alors un code fractionné.

La notion d'héritage

SASS nous permet d'hériter certaines règles par exemple :

Je lui dis que mon footer hérite des règles de la div "madiv" ainsi il aura également un fond rouge et des textes en bleu.

L'héritage est très utile dans le cas d'un thème par exemple si l'on veut que notre site suive un thème particulier sans faire de code dupliqué, cela va fortement améliorer la clarté du code.

Variables et fonctions

SASS nous permet de créer des variables :

Ici il la variable est une couleur, mais elle peut contenir n'importe quoi d'autre (un mot, un chiffre etc..).

Si on l'applique à la couleur de "madiv" par exemple :

On constate alors que toute la page (madiv et le footer car celui ci en hérite) est de ma couleur préférée.

Dans la première capture d'écran de ce tutoriel on voit que j'utilise une variable $gris mais que celle ci est à l'intérieur de deux fonctions "darken" et "desaturate" qui permettent respectivement d'assombrir la couleur et de réduire la saturation. Beaucoup de fonctions sont présentes dans la documentation.

Je reprends l'exemple du thème, je veux que tout mon site ait pour thème de couleur ma couleur préféré, pour éviter qu'il soit uniforme et par conséquent moche je vais modifier ma variable de couleur avec une ou plusieurs fonctions de traitement (et il y a de quoi faire !) aux endroits désirés et ainsi, lorsque je changerai de couleur préférée je n'aurai qu'une variable à modifier, pratique !

SASS donne aussi la possibilité de faire ses propres fonctions:avec @function (la syntaxe peut rappeller celle du PHP)

Appliquer des conditions

SASS nous permet d'utiliser des conditions comme IF.. ELSE.. etc. Je peux choisir par exemple de masquer mon footer sur certaines pages de mon site, pour cela je définis une variable $afficherFooter, un booléen que je mets à 'false':

Je l'applique à mon footer de la façon suivante :

Et voilà ! Mon footer à disparu de mon index et je n'ai plus qu'à changer la variable si je veux l'afficher.

Il est possible d'indiquer des règles au survol d'un élément avec hover:

Bien sûr il est possible de créer des @for, des @while qui donnent une infinité de possibilité de code. N'hésitez pas à aller jeter un coup d'oeil à la documentation.

NB: Il est intéressant de savoir que l'on peut appliquer des conditions à l'extérieur des règles et donc de les appliquer à des "blocs" de règles par exemple, ce procédé peut rappeler celui des Media queries.

Les images et la création de sprites

Compass nous permet de générer automatiquement des sprites à partir de nos images, pour cela je vais déjà importer mes images de météo dans mon projet, je les met dans le dossier images que je créé conformément au path indiqué dans le config.rb.

Puis j'inclue Compass dans mon projet et je lui indique le chemin relatif de mes images

automatiquement Compass génère la sprite (n'oubliez pas la commande compass watch en tâche de fond)

on inclut la sprite dans notre page de la façon suivante

"All" pour tous, "meteo" le nom et "sprites".

Il ne reste plus qu'à indiquer la class de l'image que l'on veut afficher dans une div par exemple (ici soleil) et Compass s'occupe de tout !.

Les mixins

Fabriquer ses propres mixins

On a parfois utilisé des mixins jusqu'à présent mais sans jamais vraiment savoir ce que c'était, Il s'agit en fait de 'morceaux' de code utilisés dans le but de gagner du temps. A la différence des fonction ils ne retournent rien. Par exemple j'ai créé une mixin représentant mon thème et je peux maintenant l'appliquer aux div souhaitées.

Cela permet d'aérer le code, de le rendre plus compréhensible, et d'éviter de se répéter.

Les Mixins de Compass

Dans ce tuto on a utilisé certaines mixins de Compass pour traiter les couleurs (darken, lighten etc..) mais le plus intéressant ce sont les mixins d'animation

Lorsque par exemple on utilise JQuery, des media queries ou encore un simple 'hover' pour donner du caractère à sa page, on se retrouve souvent avec des animations 'tout ou rien', saccadées, voir pas d'animation du tout. Insérez les mixins ci-dessus dans une règle qui subit un changement d'état en précisant le type et le temps de l'animation et laissez la magie opérer.

Conclusion

J'espère que cette petite introduction à SASS et Compass vous à montré tout ce qu'il est possible de faire à l'aide de ces technos dans le domaine de l'intégration, qu'il est possible d'être développeur et d'aimer styliser une page web, et que vous avez envie maintenant de devenir intégrateur !

Le premier conseil à donner sur Sass et Compass est de ne pas chercher à utiliser toutes leurs fonctionnalités dès le début. Certains l'utiliseront pour l'imbrication, d'autres pour les variables etc.. Laissez le besoin justifier l'utilisation de telle ou telle fonctionnalité au fur et à mesure de votre mise en page et n'hésitez pas à en savoir plus en consultant la documentation. Je vous souhaite une excellente mise en page !

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels