SCSS Compiler ~ compile tous les fichiers SCSS d'un dossier

Détails: Écrit par : Lomart; Catégorie : Plugins administrator; Publié le : 6 Octobre 2017; Clics : 11043

Description

Ayant délaissé LESS depuis plusieurs années, d'abord pour le framework Foundation et maintenant pour une version personnelle de knacss, j'ai été amené à écrire ce plugin qui compile automatiquement tous les fichiers SCSS d'un dossier en fichiers CSS de même nom.

Ce plugin exploite la structure traditionnelle du SASS/SCSS pour déterminer les fichiers à compiler.

Les partiels (dont le nom commence par un underscore - tiret du 8) ne sont pas compilés. Si la date de modification d'un des partiels est plus récente qu'un fichier SCSS, tous les fichiers SCSS seront recompilés.

Pour gagner du temps, les sous-dossiers ne sont pas explorés. Dans le cas d'une modification d'un partiel SCSS d'un sous-dossier, il faut forcer la compilation ou modifier légèrement un des fichiers impliqués dans le dossier racine.

Par simplification, il n'est pas prévu d'exclure des fichiers scss présent à la racine de la compilation. Vous pouvez les déplacer dans un sous-dossier crée à cet effet (ex: a_ne_pas_compiler)

On compile un fichier scss si son fichier css est plus ancien ou manquant
On compile tous les fichiers scss :
- si un des partiels est plus récent que le plus récent des fichiers scss
- si la compilation est forcée

Quels sont les avantages de pouvoir compiler plusieurs fichiers CSS ?

avoir un fichier CSS avec les seules règles utiles dans l'éditeur JCE
avoir un ou des fichiers CSS secondaires chargés uniquement pour certaines pages
une modification dans un partiel sera automatiquement reportée dans tous les fichiers CSS

Configuration

Message réussite : Affiche un message sur le site indiquant le résultat de la compilation
Compilation forcée : Permet de forcer la compilation en cas de modification d'un partiel d'un sous-dossier du dossier SCSS
Mode de compression : Mode de présentation du fichier CSS : normal, imbriqué ou compressé
Source Map : Utile pour déboguer, avec les outils de développement du navigateur, les fichiers css compilés.
Prise en charge du template : Oui pour compiler les fichiers SCSS du template par défaut. Les sous-dossiers impliqués sont à indiquer dans les zones au-dessous.
Prise en charge autres dossiers : Il devient fréquent d'avoir des extensions qui embarquent leur feuille de style générée à partir d'un fichier SCSS. Dans ce cas, indiquer dans le premier champ le(s) dossier(s) contenant les SCSS. Puis dans la zone suivante, dans le même ordre, le(s) dossier(s) de stockage du CSS généré.

Source map

Nouveauté version 2.7 Cette option génère un fichier qui sera utilisé par l'inspecteur de votre navigateur pour donner le lien vers le fichier partiel SCSS à l'origine d'une règle CSS.

Un exemple pour montrer la puissance et l'utilité de cette option.

Dans l'inspecteur de code du navigateur, ciblez le sélecteur pour lequel vous souhaitez obtenir des informations.

Vous avez bien la règle CSS appliquée, mais la référence n'est pas au fichier CSS, mais au partiel SCSS

Un clic sur le nom du partiel SCSS affiche son contenu

Téléchargement

plg_SCSS_compiler_v5.0.zip (131.41 ko - 26/11/2023 16:09) téléchargé 120 fois
plg_SCSS_compiler_v2.7.zip (123.38 ko - 26/11/2023 18:26) téléchargé 6412 fois

Joomla 4/5 : Il n'est pas possible de compiler les SCSS de base des templates avec framework (Cassiopeia , Astroid, ...). Il faut utiliser leur outil de compilation

Par contre, SCSS-Compiler est parfaitement indiqué pour compiler la feuille de style utilisateur.

Pour Cassiopeia, il faut indiquer dans "Prise en charge autres dossiers" :

Dossier(s) SCSS : media/templates/site/cassiopeia/scss/user
Dossier(s) CSS : media/templates/site/cassiopeia/css

Articles

Tous les articles en relation avec ce plugin

SCSS-Compiler ~ Comparaison SCSS / LESS

Support

Pour partager vos questions et suggestions, c'est sur le forum SCSS

sommaire