Simplifier la gestion des feuilles de style
Le SASS est un langage de génération de feuilles de style en cascade compilées. Largement utilisé par les développeurs front-end depuis quelques années, il permet plusieurs fonctionnalités importantes.
Création de variables réutilisables
Les variables et les mixins, sont des règles de CSS qui permettent la création de fonctions, fluidifient le code et l’optimisent en évitant la redondance. Pour aller plus loin, le SASS facilite la mise en place de système comme BEM (Blocks, Elements and Modifiers) et OOCSS (Object Oriented CSS), qui sont des bonnes pratiques utilisées pour le développement front end.
Associé à compass, il permet d’obtenir un grand nombre de variables et mixins prédéfinies et réutilisables à souhait (notamment tout ce qui concerne les vendor-prefix).
Limiter les exceptions
Associé à de bonnes pratiques et une bonne organisation, SASS permet de limiter les exceptions en globalisant le style d’un projet rapidement.
Organisation et logique
Organiser plusieurs feuilles de style selon une logique de modules/layout/pages permet de mieux gérer et visualiser les exceptions. Le code imbriqué suit donc une véritable logique de style en cascade et SASS en permet la visualisation concrète.
Compilation du code
SASS permet la compilation des fichiers .scss en fichier unique CSS qui sera le seul à être utilisé dans le site. En effet, SASS permet la création d’un grand nombre de fichiers .scss et permet la création rapide d’un fichier unique de style qui se regénère à chaque compilation. De plus, il est possible de rendre ce fichier encore moins lourd en le couplant à un système de minification automatisé.
La méthodologie de développement
Au moment de la construction du projet, il faut avoir une organisation en ramifications. Dès le départ, les éléments globaux et les exceptions liées doivent donc être déterminés.
D’où l’intérêt, pour la partie design de faire un guide des styles. Celui-ci sera alors utilisé en tout premier lieu par le programmeur pour le front-end afin de déterminer les variables globales du site. Ainsi, cette vue d’ensemble sur le rendu de son site assure le développement rapide de nouveaux modules grâce aux composantes facilement réutilisables.
L’organisation des fichiers .scss est donc capitale et doit être pensée dès le début de chaque projet selon la nature et la complexité de celui-ci. En général, on produit des documents de styles généraux qui seront applicables partout. Puis, on crée des exceptions pour les pages, gabarits ou modules spécifiques pour lesquels on écrasera le style par défaut appliqué via les fichiers de style généraux.
Voici un tableau explicatif pour s’y retrouver un peu :
Styles globaux de contenu
Ici par exemple, dans un dossier général on créera un fichier .scss :
- « main.scss » pour déclarer des variables et des styles généraux où s’appliqueront tout les styles pour les h1 h2 p a
- « fonts.scss » pour regrouper toutes les fonts du site
- « mixins.scss » où on déclarera toutes nos règles de style avec plusieurs variables
Zones communes
Ensuite, dans un dossier que l’on nommera « layout », on pourra retrouver les composantes communes à tous les gabarits, par exemple :
- Un fichier « menu.scss »
- Un fichier « header.scss »
- Un fichier « footer.scss »
Modules pouvant se retrouver d’une page à l’autre
Puis, on peut créer un dossier « module » où on appliquera un style propre à une zone spécifique qui va possiblement se retrouver à plusieurs endroits du site. C’est un module « portable » en quelque sorte :
- Un fichier « contact-form.scss »
- Un fichier « calendrier.scss »
Exceptions
Finalement, on créera un autre dossier « pages » où on pourra gérer nos exceptions par page, par exemple. Imaginons que dans une page spécifique on veut avoir tous les H1 en rouge au lieu du bleu qui a été déclaré dans les styles généraux dans le fichier « main ». On créera alors un fichier spécifique à cette page afin d’écraser (override) les styles appliqués :
- Un fichier « contact.scss » pour gérer toutes les exceptions de la page contact
- Un fichier « produit.scss » pour gérer les exceptions de la page produit
Pour aller plus loin, vous pouvez consulter la documentation officielle de SASS
SASS est un outil puissant qui ne peut être utilisé à son plein potentiel sans l’acquisition d’une bonne logique d’organisation et une bonne compréhension de son projet de base. Chez GTI, anciennement MultipleMedia, nous en maîtrisons les particularités et appliquons cette logique à chaque nouveau projet.
