Sass me tentait depuis quelques années déjà…
Récemment, grâce à l’impulsion d’un ami développeur qui m’a fait quitter ma zone de confort, j’ai fait l’effort de m’y intéresser en détails et de voir comment Sass pouvait être utilisé avec Divi.

Tout d’abord, pour ceux qui ne connaissent pas Sass, apprenez qu’il s’agit d’un préprocesseurs CSS. Autrement dit, une “nouvelle” syntaxe CSS (nommée SCSS) plus riche et qui se rapproche d’un véritable langage de programmation avec des variables, des fonctions, des conditions, etc.

Dans cet article, je vous expliquerai ce que Sass peut vous apporter dans vos développements de sites Divi.
De plus, je vous ferai une suggestion de workflow en vous présentant quelques outils utiles pour facilement coder en SCSS.

Les avantages de Sass

Notez que je ne listerai ici que quelques-unes des caractéristiques marquantes de Sass qui pourraient vous inciter à travailler en SCSS.
Si vous voulez en savoir beaucoup plus sur Sass, je vous invite à lire ces articles très détaillés sur Alsacréations et La Cascade.

Les variables

Certains diront que CSS embarque déjà un système de variables…
C’est exact, mais la propriété n’est pas encore supportée par suffisamment de navigateurs pour être utilisée sans risque. Le site Can I Use estime qu’environ 91% des navigateurs supportent les variables CSS (voir le détail).

L’intérêt des variables est de définir une valeur à un endroit, une bonne fois pour toutes.
Elles sont couramment utilisées pour les couleurs et les tailles de caractères, mais il est possible de définir une valeur d’arrondi, d’ombre portée, etc.

Voici un exemple de variables SCSS. Il suffit de les déclarer en haut du fichier SCSS, puis de les appeler où on en a besoin :

$couleur-bleue: #009ee0;
$corps-texte-courant: 16px;
$contour-blocs: 2px solid #dadada;

#mon_element {
	color: $couleur-bleue;
	font-size: $corps-texte-courant;
	border: $contour-blocs;
}

Ce qui donne, une fois compilé en CSS :

#mon_element {
	color: #009ee0;
	font-size: 16px;
	border: 2px solid #dadada;
}

Les règles imbriquées

L’imbrication de règles permet de simplifier grandement la lisibilité du code CSS en évitant de se répéter.

Voici un exemple avec les sélecteurs de la barre de navigation de Divi et les éléments du menu.

#top-menu {
	margin-bottom: 20px;
		li {
			background-color: #dadada;	
			a {
				color: #009ee0;
			}
		}
}

Et le résultat une fois compilé en CSS :

#top-menu {
	margin-bottom: 20px;	
}

#top-menu li {
	background-color: #dadada;	
}

#top-menu li a {
	color: #009ee0;
}

Le sélecteur &

Je cite ce sélecteur car si vous avez déjà vu des fichiers SCSS, c’est probablement l’élément qui vous a fait vous interroger.
& est un raccourci qui permet d’éviter d’avoir à saisir plusieurs fois le nom de son sélecteur parent.

L’exemple le plus simple et le plus courant concerne les :hover :

a {
	color: #009ee0;
		&:hover {
			color: #dadada;
		}
}

Je pense que vous avez compris le principe, voici tout de même le résultat en CSS :

a {
	color: #009ee0;
}

a:hover {
	color: #dadada;
}

La directive @extend

@extend est également très pratique pour éviter d’avoir à écrire du code en double.
Je dirais que c’est un peu une classe dans la classe, une super-variable.
C’est à dire que vous allez pouvoir récupérer les règles d’une classe déjà définie pour l’injecter dans les règles d’une autre classe.

Voici un exemple pour illustrer mon propos.
On va définir une classe .ombre_et_arrondis avec plusieurs règles et on va l’utiliser sur d’autres éléments.
Ici encore, l’avantage est que si on est amené à modifier les valeurs de la classe .ombre_et_arrondis, celle-ci seront répercutées partout où @extend est employé.

.ombre_et_arrondis {
	box-shadow: 10px 10px 30px rgba(100, 100, 100 ,0.5);
	border-radius: 15px;
}

#un_element {
	background-color: #dadada;
	@extend .ombre_et_arrondis;
}

.un_autre_element {
	background-color: #009ee0;
	@extend .ombre_et_arrondis;
}

Et une fois compilé en CSS :

.ombre_et_arrondis, 
.un_autre_element, 
#un_element {
  box-shadow: 10px 10px 30px rgba(100, 100, 100, 0.5);
  border-radius: 15px;
}

#un_element {
  background-color: #dadada;
}

.un_autre_element {
  background-color: #009ee0;
}

À savoir qu’il existe 2 variantes de @extend qui sont @placeholder et @mixin qui permettent d’aller encore plus loin dans la simplification de la feuille de styles et la déclaration de fonctions.

Pour ceci et pour bien d’autres fonctionnalités plus avancées, je vous renvoie aux articles que j’ai cités en début de chapitre.

Compiler le SCSS en CSS

Maintenant que vous vous représentez ce que Sass peut vous apporter en matière d’optimisation des feuilles de styles, il est temps de voir comment utiliser ce préprocesseur avec Divi.

Car vous l’avez certainement compris en lisant le chapitre précédent, on peut pas simplement déclarer dans le <head> de notre site un fichier style.scss à la place de notre fichier style.css habituel.
Il faut compiler le SCSS en CSS, c’est-à-dire le convertir en CSS pour qu’il soit lisible par les navigateurs.

Pour ce faire, la méthode la plus facile d’accès est d’utiliser une application dédiée (mais si vous êtes chauds, vous pouvez le faire en ligne de commande !).

J’ai personnellement arrêté mon choix sur Prepros pour les raisons suivantes :

• de multiples fonctionnalités intéressantes
• une interface graphique agréable
• une offre d’essai illimitée (à l’instar de Sublime Text, vous n’aurez que de temps à autres une popup vous proposant d’acheter une licence)
• disponible pour Mac et PC

Les fonctionnalités de Prepros

Les 2 principales fonctionnalités de Prepos sont la compilation des fichiers SCSS et le déploiement des fichiers CSS sur le serveur sur lequel se trouve le site.

Car bien que Prepros soit installé en local sur votre machine et que vos fichiers SCSS y soient également stockés, l’application permet de se connecter à un serveur distant via FTP.
Donc à chaque fois que vous enregistrez votre fichier SCSS, le fichier CSS généré est automatiquement versé sur le serveur distant où se trouve votre site.
Bien sûr, si vous travaillez uniquement en local, cette fonctionnalité vous sera inutile.

Une autre fonctionnalité de Prepros qui est bien utile est le Live Preview.
Dès que vous enregistrez vos modifications sur votre fichier SCSS, les changements apparaissent sur votre site sans que vous ayez à recharger la page.

Guide de démarrage de Prepros

Préparez votre arborescence

Maintenant que vous avez téléchargé et installé Prepros, créez sur votre ordinateur un dossier dans lequel vous allez stocker vos divers projets de sites Divi utilisant Sass.

Comme vous pouvez le voir sur la capture d’écran ci-dessus, j’ai créé un répertoire “sites sass” dans lequel j’ajoute un dossier pour chaque nouveau projet.
Dans chaque projet, j’ai créé un sous-dossier qui accueillera mon ou mes fichiers SCSS.

Pour structurer votre fichier SCSS, vous avez 2 solutions.

Soit vous placez toutes vos règles dans un seul et même fichier SCSS, comme vous le faites en CSS.

Soit vous utilisez les “partials” de Sass. Ceci vous permet de dispatcher les règles de votre choix dans des sous-fichiers que vous déclarez simplement dans votre fichier SCSS principal.
Lors de la compilation, toutes les règles seront regroupées dans un unique fichier CSS.

Enfin, mon fichier CSS est généré dans le dossier principal du projet.

Configurez votre premier projet Sass

Si ce n’est pas déjà fait, lancez l’application Prepros et cliquez sur l’icone + situé en bas à gauche pour sélectionner le dossier de votre premier projet (1).
Dans l’onglet Files apparaitront les dossiers contenus dans votre projet.

Ensuite, rendez-vous dans l’onglet Settings pour paramétrer les détails de votre projet (2).

Naviguez à la section Ftp Settings et remplissez les champs avec les identifiants FTP de votre serveur distant.

En complément, je vous suggère de cocher la case “Upload On Change”. Celle-ci permet, comme je vous l’expliquais plus haut, de mettre en ligne le fichier CSS à chaque fois que vous enregistrez le fichier SCSS.

Enfin, Prepros filtre par défaut un certain nombre d’extensions de fichiers afin que ceux-ci ne soient pas uploadés.
Pour ma part, je préfère retirer de la liste l’extension .scss afin que les fichiers de ce type soient tout de même présents sur le serveur distant. Si vous avez besoin d’y avoir accès depuis une autre machine, c’est tout de même plus pratique ainsi.

Pour terminer, cliquez sur votre fichier style.scss.
Dans la colonne de droite, sous Output Path, cliquez là où apparait style.css afin de modifier le répertoire dans lequel sera généré le fichier CSS. Choisissez le dossier de votre projet et non un sous-dossier afin qu’in fine votre feuille de styles soit bien située dans le dossier principal de votre thème enfant.

Dans cette même colonne, vous pouvez noter que “Autoprefixer” est activé par défaut. Ainsi, pas la peine de préciser les divers préfixes navigateurs (-webkit, -moz, etc.), Prepros s’en charge lui-même.

Si vous le souhaitez, vous pouvez également activer l’option “Minify Css” qui permettra de réduire le poids de votre fichier CSS en supprimant tous les espaces de celui-ci, les commentaires, etc.
Sachant que ce n’est pas forcément utile étant donné que les plugins de cache proposent généralement cette option.

Utilisez le Live Preview

Comme je vous l’expliquais en début de chapitre, Prepros embarque une fonctionnalité intéressante qui permet d’éviter d’avoir à recharger la page en cours à chaque fois que l’on veut voir apparaitre nos modifications de style.

Toujours dans l’onglet Settings, allez dans la section Live Preview et précisez l’URL de votre site (1).

Ensuite, pour lancer “Live Preview”, vous n’avez plus qu’à cliquer sur l’icone en forme de mappemonde dans le menu principal de l’application (2).
Votre navigateur s’ouvrira avec une URL du type https://localhost:7880/nomdevotreprojet

Désormais, à chaque fois que vous ferez un CTRL + S sur PC ou Cmd + S sur Mac sur votre fichier SCSS, la page de votre site sera automatiquement rafraîchie (pour info, parfois j’ai besoin de faire le raccourci 2 fois de suite).

Pour tout savoir sur la manière d’utiliser en détails l’application Prepros, je vous invite à consulter sa documentation (en anglais).

Déclarer la feuille de styles dans WordPress

Pour que votre feuille de styles personnalisée soit reconnue, vous avez besoin d’un thème enfant.

Si vous n’avez pas de thème enfant, vous pouvez télécharger gratuitement celui de Divi Community.

De plus, si vous vous posez des questions sur les thèmes enfants, je vous invite à lire mon article “Tout savoir sur les thèmes enfants pour Divi”.

Dans votre thème enfant, il vous suffit de recréer la structure de dossiers que vous avez choisie. Souvenez-vous, dans mon exemple chapitre précédent, mon projet “Sandbox” portait donc le nom de mon thème enfant, et j’avais créé un sous-dossier “sass” pour accueillir mon/mes fichier(s) SCSS.

Ne perdez pas l’en-tête !

J’en profite pour apporter une précision importante concernant la feuille de styles du thème enfant.
Ce fichier (qu’il soit en CSS ou en SCSS), pour être conforme, doit présenter une en-tête valide sous la forme d’un commentaire.
Exemple ci-dessous avec le fichier style.css du thème enfant de Divi Community :

/*!
Theme Name: Divi Community Child Theme
Description: Theme enfant de Divi par Divi Community
Author: Julien - WebMate
Author URI: https://www.divi-community.fr
Template: Divi
Version: 1.1
*/

Comme je l’évoquais précédemment, il est possible dans Prepros de générer un fichier CSS minifié. Cela signifie, entre autres, que les commentaires seront supprimés.
Donc, pour que l’en-tête de la feuille de styles du thème enfant ne soit pas effacée, il suffit d’ajouter dans votre fichier SCSS un ! après l’ouverture du commentaire (voir ligne 1 du code ci-dessus).

Aller plus loin avec Git

Je viens de vous expliquer comment mettre en place un workflow depuis une machine en local vers un serveur distant.
Je ne sais pas vous, mais une fois tout ceci configuré, la première question que je me suis posée a été : “Et si je veux modifier mes fichiers SCSS depuis un autre ordinateur ?…”

Bien sûr, la solution la plus simple est de récupérer le(s) fichier(s) SCSS que nous avons pris soin d’uploader sur notre serveur FTP et de le(s) copier sur ce second ordinateur. Prepros (ou une application équivalente) doit évidemment y être installée.
Ensuite, il suffit de reproduire le même process que je viens de vous détailler.
Ce n’est pas bien compliqué, mais je ne trouve pas ça optimal…

Pourquoi utiliser Git

Pour faire simple, les 2 fonctionnalités principales qui vont nous intéresser sont la synchronisation d’une machine à l’autre et le système de versions.

La synchronisation

La synchronisation va nous permettre de toujours travailler sur la dernière version du fichier SCSS, quel que soit l’ordinateur sur lequel on se trouve.

Le système de versions

Le système de versions est le propre du langage Git. Dès qu’on le souhaite, on peut créer un nouvel enregistrement du fichier qui sera conservé comme une copie distincte.
Ceci permet d’avoir un historique exhaustif des modifications effectuées, de comparer facilement les versions entre elles et de revenir à une version antérieure si nécessaire.
Sans rentrer dans les détails, il est même possible de créer des versions parallèles (appelée “branches”) du fichier et de les faire évoluer indépendamment l’une de l’autre, de switcher entre elles et même de les fusionner si on le souhaite.

Résumons en langage geek :

Git est une capsule temporelle, couplée à une machine à remonter le temps ayant la possibilité de voyager dans des univers parallèles.

Comment utiliser Git

Téléchargez un client Git

Là encore, comme pour la compilation des fichiers SCSS, vous pouvez entièrement contrôler Git en ligne de commande.
Mais je vous propose de faire simple en utilisant une application dédiée.

J’ai donc arrêté mon choix sur Sourcetree pour les raisons suivantes :

• simple à prendre en main
• efficace et complet
• une interface graphique agréable
• gratuit
• traduit en français
• disponible pour Mac et PC

Trouvez un hébergeur pour vos dépôts

L’application installée en local est une chose, mais il faut également disposer d’un compte sur un service en ligne permettant d’héberger vos dépôts Git.
Pour n’en citer que quelques-uns parmi les plus connus : Github, Gitlab ou encore Bitbucket.

Pour ma part j’utilise Bitbucket, car dans sa version gratuite il propose des dépôts privés illimités (pour info, Gitlab également mais pas Github).

Évidemment, les fichiers style.css seront accessibles à tous une fois publiés dans le thème enfant, vous vous dites donc qu’il n’y a aucune raison de les cacher. Mais pensez que vous pouvez être amené à ajouter d’autres fichiers plus confidentiels dans le contenu de votre dépôt, aussi il est préférable que ceux-ci restent privés.
Dans les réglages de Prepros, il vous faudra juste ne pas oublier de retirer ces fichiers des “Watched files” (fichiers surveillés) ou les placer dans un dossier que vous aurez défini comme “Unwatched” (non surveillé). Ceci afin qu’ils ne soient pas uploadés sur votre serveur FTP à la vue de tous.

Sourcetree en bref

Préparez vos dépôts

Une fois que vous avez installé Sourcetree et configuré votre compte Bitbucket, Github ou autres…, vous allez pouvoir créer un premier dépôt en sélectionnant le dossier de l’un de vos projets de site en Sass.

Pour ce faire, cliquez sur Nouveau puis sur Ajouter un dépôt local existant et sélectionnez le dossier de votre projet de site Sass.

Cochez la case Créer aussi un dépôt distant puis cliquez sur le bouton Créer.

Afin de mieux ordonner mes dépôts, j’ai également créé un Nouveau groupe de dépôts nommé “Sites SASS”. J’en ferai un autre nommé “Plugins”, etc.

“Commitez” vos fichiers

Un “commit” est un instantané de votre fichier, à un moment bien précis. Comme un point de sauvegarde dans un jeu vidéo par exemple.

Un fois cet instantané défini en local, il vous faudra le “pousser”, c’est-à-dire le mettre en ligne sur votre dépôt distant.

Dans la section État du fichier (1), vous verrez apparaitre les fichiers ayant subi des modifications depuis le dernier commit.
Cliquez sur Commiter (2) pour définir votre instantané.
Pour vous souvenir quelles ont été les principales modifications effectuées sur cette version, je vous suggère d’ajouter un commentaire (3).
Cochez Poussez automatiquement les commits… (4) et vous n’aurez plus qu’à valider avec le bouton Archiver (5).

Récupérez des commits

Ci-dessus un exemple alors que des commits sont disponibles sur le dépôt distant. Ceci est visible dans la section Historique (1).

On voit ici (2) en bas de la liste un premier commit qui est bien synchronisé entre le dépôt local et le dépôt distant. Et on remarque au-dessus 2 commits qui n’ont pas encore été “tirés” vers le dépôt local.

En choisissant l’un des fichiers concernés, on peut voir les modifications qui ont été effectuées (3) par rapport à la version dont on dispose en local.

Enfin, cliquez sur Tirer (4) pour télécharger ces fichiers dans votre dépôt local.

En résumé

Dans cet article, pourtant assez long, j’ai seulement effleuré les fonctionnalités offertes par ces deux mastodontes que sont Sass et Git.

Nous venons donc de voir que Sass est parfait si l’on souhaite optimiser sa méthode travail sur les feuilles de styles. Il apporte un gain de temps et de lisibilité évident.
De plus, ce langage est simple à prendre en main et on peut l’utiliser même si on ne connait pas toutes ses particularités.

En complément, Git ouvre également des possibilités gigantesques pour qui veut sauvegarder et versionner ses projets. Il est aussi parfait pour le travail d’équipe.
Mes exemples portaient sur des fichiers textes, mais sachez que tous types de fichiers sont supportés (images, polices…).

Bien sûr, il ne s’agit ici que d’une suggestion de workflow basée sur mes habitudes de travail et mon ressenti vis-à-vis des applications utilisées. À vous d’aller plus loin et de trouver les outils qui vous conviennent le mieux.

Pour terminer, je précise tout de même que nous ne ferons pas de support technique dans les commentaires de cet article pour les applications citées ici. Je vous invite à consulter les rubriques d’aide sur leurs sites respectifs. De plus, vous pourrez trouver sur Google de nombreux articles et tutos pour vous aider à prendre en main ces outils.

Partager