Le CSS est un langage informatique utilisé pour créer ou personnaliser des pages web. Cependant, il est limité à un langage de description de type propriétés/valeurs. C’est pour remédier à cela que les préprocesseurs CSS comme SASS ont été créés. Grâce à des variables, des conditions, des fonctions…, ceux-ci vous permettent de coder à la manière de certains langages comme PHP ou JavaScript. Dans la suite de cet article, nous allons vous montrer comment utiliser SASS avec Divi. Mais avant, nous allons vous présenter ce préprocesseur ainsi que quelques-unes de ces caractéristiques marquantes.

SASS : de quoi s’agit-il ?

Tiré de l’acronyme « Syntactically Awesome Style Sheets », le SASS est un préprocesseur pour le langage CSS. Il permet de générer dynamiquement des feuilles de styles CSS en utilisant une syntaxe qui se rapproche le plus d’un vrai langage de programmation que d’un langage de description.

Les premières versions de ce préprocesseur utilisaient la syntaxe indentée, laquelle était inspirée du HAML (HTML Abstraction Markup Language). Celles-ci n’ont pas vraiment connu un essor favorable, car leur vocabulaire était différent du CSS conventionnel. Ensuite, les améliorations apportées par la version 3 de SASS ont donné naissance à une nouvelle syntaxe, nommée SCSS (Sassy CSS). Celle-ci est plus simple, plus proche du CSS classique et rend ce dernier compatible avec les compilateurs SASS.

Autrement dit, un document SASS écrit en CSS avec la syntaxe SCSS est syntaxiquement correct. Toutefois, ce n’est pas le seul avantage qui a encouragé de nombreux intégrateurs et développeurs font-end à se lancer dans l’utilisation de ce préprocesseur. Nous apporterons plus de détails à ce sujet dans le point suivant de notre guide.

Quels sont les avantages de SASS ?

Le principal avantage de ce préprocesseur CSS est qu’il est riche en fonctionnalités. Celles-ci vous permettent de gagner du temps et de simplifier vos scripts. C’est d’ailleurs ce qui le débarque de certains préprocesseurs comme Less, Reword ou Closure. Outre le fait que le SASS soit syntaxiquement proche du CSS, il utilise aussi les principaux fondements d’un langage de programmation comme : les variables, les fonctions, les directives, la compilation et plus encore.

  • Les variables : Bien que le CSS dispose déjà d’un système de variables, l’utilisation de sa propriété n’est pas sans risque. C’est pour cela que les développeurs ont parfois recours aux variables SCSS. Elles sont généralement utilisées pour les tailles de caractères et les couleurs. Elles peuvent également servir pour définir une valeur d’ombre portée, d’arrondi, etc.
  • L’imbrication de règles : Les règles imbriquées vous évitent de vous répéter lors du codage, ce qui rend ainsi votre feuille de styles CSS plus lisible et plus propre.
  • La directive @extend : Cette directive vous donne la possibilité de définir une classe avec des règles que vous pourrez ensuite utiliser sur d’autres éléments. Si vous modifiez à un moment donné les valeurs de ladite classe, ces modifications seront appliquées partout où vous avez utilisé @extend. C’est très pratique, car cela vous évite d’avoir à écrire votre code en double.

En dehors de ces fonctionnalités, il y a aussi d’autres options plus avancées comme @placeholder et @mixin. Il s’agit de deux variantes de @extend qui peuvent aussi s’avérer très utiles dans la déclaration de fonctions et simplification de votre feuille de styles. Les plus expérimentés auront même la possibilité de créer leurs propres fonctions SASS en utilisant la syntaxe @function.

Un autre avantage de SASS est qu’il peut s’étendre. Selon l’environnement de travail, il est possible d’ajouter un ensemble de compléments (extensions, plug-ins, librairies…) pour étendre la capacité native de ce préprocesseur CSS. Parmi les plus utilisés, on retrouve : Compass, Breakpoint, CSS Sprite, Sprite factory, Saffront, Typesettings, Susy, Andy, Buttons, Bourbon, Scut, etc. En faisant des recherches sur le sujet, vous en trouverez bien d’autres.

Comment utilise-t-on SASS avec Divi ?

Nous venons de vous présenter SASS ainsi que ses différents avantages en termes d’optimisation des feuilles de styles CSS. Comme vous pouvez le constater, il a vraiment beaucoup à offrir. À présent, nous allons vous montrer comment utiliser ce préprocesseur avec Divi. La première étape sera de compiler le SCSS en CSS.

Compilation de SASS en CSS

Il s’agira de convertir le SCSS en CSS pour que celui-ci soit lisible par les navigateurs. Pour ce faire, vous pouvez passer par les lignes de commande ou utiliser une application dédiée. Nous avons choisi la seconde option, car c’est la méthode la plus simple. Pour réaliser ce guide, nous avons utilisé l’application Prepros en raison du fait qu’elle offre de nombreux avantages : application disponible pour PC et pour Mac, de multiples fonctionnalités, une période d’essai illimitée…

Démarrez l’application Prepos

Pour commencer, vous allez télécharger et installer Prepos sur votre ordinateur. Ensuite, vous allez créer sur ce dernier un dossier dans lequel seront stockés vos projets de sites Divi utilisant SASS. Vous avez la possibilité de créer un sous-dossier qui conservera votre ou vos fichiers SCSS.

Pour ce qui est de la structuration, vous avez le choix entre : placer toutes vos règles dans un seul et même fichier SCSS ou utiliser les « partials » du SASS pour répartir les règles à votre convenance dans des sous-fichiers. Ceux-ci devront bien évidemment être déclarés dans votre fichier SCSS principal. Lors de la compilation, toutes vos règles seront réunies dans un unique fichier CSS qui sera généré dans le dossier principal de votre projet.

Configurez votre projet SASS

Pour configurer un projet SASS sur Prepros, c’est assez simple. Pour commencer, lancez l’application et sélectionnez le dossier de votre projet en cliquant sur l’icône « + » dans le coin inférieur gauche. Dans l’onglet « Files », vous verrez les différents dossiers que contient votre projet. Ensuite, cliquez sur l’onglet « Settings », puis allez dans la section « Ftp Settings » où vous devrez remplir les champs avec les identifiants FTP de votre serveur distant. En haut de l’interface, cochez la case « Upload On Change ». C’est l’une des principales fonctionnalités de Prepros.

À chaque fois que vous enregistrez votre fichier SCSS, elle déploie automatiquement le fichier CSS généré sur le serveur distant sur lequel se trouve votre site Divi. Par ailleurs, pensez à retirer l’extension « .scss » de la liste des extensions de fichiers filtrées par l’application. Ainsi, en cas de besoin, vous pourrez accéder facilement à ce type de fichiers.

Pour finir, retournez dans l’onglet Files et cliquez sur le fichier « style.scss ». Une interface s’affichera à droite où vous verra « style.css » juste en bas de « Output Fath ». Cliquez là-dessus pour modifier le répertoire dans lequel le fichier CSS sera généré. À ce niveau, vous devrez choisir le dossier de votre projet pour que votre feuille de styles soit bien située dans le dossier principal de votre thème enfant. Sur cette même interface, vous remarquerez que l’option « Autoprefixer » est activée par défaut. Vous n’avez donc plus besoin de préciser à chaque fois le préfixe d’un navigateur.

En dessous de « Autoprefixer », vous trouverez l’option « Minify Css ». Elle peut s’avérer très utile, notamment pour réduire le poids de votre fichier CSS. Toutefois, vous n’êtes pas obligé de l’activer, puisque les plug-ins de cache proposent généralement cette fonctionnalité.

Paramétrez le Live Preview

Le Live Preview est une autre fonctionnalité très utile de Prepros. Elle fait apparaitre sur votre site vos modifications de style sans que vous ayez besoin de recharger continuellement la page en cours. Pour l’activer, vous devez cliquer sur l’onglet « Settings », puis rendez-vous dans la section « Live Preview ». À ce niveau, vous allez préciser l’URL de votre site dans le champ « Server URL » en bas.

Ensuite, vous allez lancer Live Preview en appuyant sur l’icône en forme de mappemonde dans le menu principal. Une fois que c’est fait, il suffira de faire « CTRL + S » à chaque fois que vous souhaitez rafraichir la page votre site. Pour les utilisateurs de Mac, vous ferez « Cmd + S ».

Déclaration de la feuille de styles

Après avoir compilé le SCSS en CSS, l’étape suivante consistera à déclarer votre feuille de styles personnalisée dans WordPress. Pour ce faire, vous aurez besoin d’un thème enfant. Vous pouvez en télécharger gratuitement avec Divi Community. En général, les thèmes enfants pour Divi embarquent quelques fonctionnalités utiles pour éditer facilement les CSS. Après cela, vous allez accéder à votre thème enfant et recréer la structure de dossiers que vous avez choisie.

Si vous aviez créé auparavant des sous-dossiers SASS pour stocker votre ou vos fichiers SCSS, il faudra faire de même pour la nouvelle structure. Vous devez également porter une attention particulière à l’en-tête de la feuille de styles de votre thème enfant. Pour que votre fichier soit conforme, il doit avoir un en-tête valide sous la forme d’un commentaire. Ceci est valable pour un fichier aussi bien en SCSS qu’en CSS.

Si après compilation, Prepros génère un fichier CSS compacté, cela voudra dire que les commentaires seront supprimés au même titre que les espaces et les indentations. Alors, pensez à ajouter un « ! » dans votre fichier SCSS, juste après l’ouverture du commentaire, ce qui donnera ceci : « /* ! ». Ainsi, l’en-tête de la feuille de style de votre thème enfant ne risque plus d’être effacé.