SASS, un langage qui a du style - MultipleMedia
Lisez sur nos vingt ans !

SASS, un langage qui a du style

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, qui 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 styles 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 permets 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éutilisable.

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 :

SASS

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 comme 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 MultipleMedia, nous en maîtrisons les particularités et appliquons cette logique à chaque nouveau projet.

Multimédia, de 1989 à nos jours…

Recherche

10 décembre 2018

À la fin des années 90, le multimédia représentait la combinaison de différentes formes de contenu. Le terme pouvait être utilisé comme un nom ou comme un …

Par : Jean-Philippe Georges, Responsable Marketing et Communication

C’est quoi, le Material Design ?

Recherche

21 novembre 2018

Le Material Design est une tendance qui joue avec les formes géométriques de base pour concevoir des interfaces élégantes et structurées. En combinant un triangle, un cercle...

Par : Shanny Bélisle, et
Jean-Philippe Georges, Responsable Marketing et Communication

WordPress 5 et Gutenberg | Avantages et Inconvénients

Recherche

23 octobre 2018

WordPress 5 et Gutenberg: notre verdict !   Résultat mitigé, heureusement il reste de la place pour d'éventuelles améliorations à venir! Cependant, nous commençons...

Par : Nathalie Vallières, Développeur et
Jean-Philippe Georges, Responsable Marketing et Communication