Utilisation de préprocesseurs CSS dans Dreamweaver

Le langage CSS est un langage qui sert à déterminer le style d’un document HTML. Les préprocesseurs CSS compilent le code écrit dans un langage prétraité en code CSS plus abordable. Le langage prétraité est un niveau de code CSS plus proche de celui d’un langage de programmation.

Plus précisément, les préprocesseurs vous permettent d’utiliser des variables, des combinaisons de modules, des fonctions et de nombreuses autres techniques qui ne sont pas possibles en CSS.
Les préprocesseurs CSS vous permettent de ne définir tous les éléments qu’une seule fois et de les réutiliser de manière répétée, générant ainsi un code CSS facile à mettre à jour et à développer.

Les préprocesseurs CSS, vous permettent également de générer un code CSS simple et facile à mettre à jour. Si vous créez des sites Web qui sont liés à un certain nombre de fichiers CSS, utiliser des préprocesseurs tels que Sass ou Compass peut vous aider à faire moins de codage manuel et d’actions de copier/coller.

Dreamweaver utilise un compilateur Ruby-Sass intégré permettant de compiler les fichiers SCSS et LESS. Il prend également en charge les frameworks Compass et Bourbon pour compiler les fichiers Sass.

Le langage LESS s’appuie sur JavaScript tandis que Sass est basé sur Ruby. Toutefois, vous n’avez pas besoin de maîtriser ces deux langages. Vous n’avez pas non plus besoin d’utiliser la ligne de commande pour compiler les fichiers en code CSS. Dreamweaver compile automatiquement ces fichiers en code CSS à l’aide de la bibliothèque JavaScript less.js lors du chargement, de la modification ou de l’enregistrement de ces fichiers.

Versions prises en charge :

• Sass : 3.4.25
• LESS : 2.7.2
• Compass : 1.0.3
• Bourbon : 4.2.6
• Bourbon Neat : 1.7.3
• Bourbon Bitters : 1.2.0

La façon dont Dreamweaver gère les préprocesseurs CSS varie selon si vous avez défini un site ou non. Si vous définissez un site, vous pouvez définir des préférences de préprocesseur CSS et utiliser les frameworks Compass et Bourbon depuis Dreamweaver.

Lorsque vous définissez un site, vous pouvez personnaliser la façon dont les préprocesseurs CSS fonctionnent dans Dreamweaver en définissant des préférences de préprocesseur CSS propres au site. Définir des préférences de préprocesseur CSS propres au site vous permet de spécifier des options de compilation spécifiques sur la base d’un site. Vous pouvez également personnaliser l’emplacement des fichiers Sass et CSS ainsi que les options de préprocesseurs spécifiques à chaque site.

Les sections ci-dessous expliquent comment utiliser Dreamweaver avec des préprocesseurs CSS.

Dreamweaver 2017 et les préprocesseurs CSS

La prise en charge des préprocesseurs CSS est intégrée à Dreamweaver dans la version 2017. Vous pouvez donc travailler avec des fichiers Sass/LESS/SCSS directement dans Dreamweaver. Vous pouvez compiler automatiquement des fichiers CSS dans Dreamweaver grâce au raccourci Ctrl + S/Cmd + S. Vous avez aussi la possibilité de compiler des fichiers CSS un par un de façon manuelle en sélectionnant Outils > Compiler (ou F9). Les modifications se répercutent également dans tous les fichiers HTML ouverts auxquels le fichier CSS compilé est joint ou attaché.

Voici une description générale des tâches impliquées lors de l’utilisation de préprocesseurs CSS :

• Installez le compilateur approprié si vous souhaitez utiliser Compass ou Bourbon dans Dreamweaver. Cette installation se fait en un clic. Définissez les paramètres de préprocesseur CSS.

Installez le compilateur uniquement si vous souhaitez une copie des fichiers de framework (Bourbon) ou si vous souhaitez générer des fichiers SCSS par défaut et des fichiers de configuration utilisant Ruby (Compass). Il est conseillé de garder une copie des fichiers de framework. Si certains mixins ou fonctions du framework de développement sont supprimés par la suite, vous pouvez toujours accéder aux fichiers de préprocesseur depuis votre site.

• Assurez-vous que la compilation automatique est activée. Appuyez ensuite sur Enregistrer pour mettre à jour les fichiers CSS.
• (Facultatif) Affichez les modifications qui se répercutent dans toutes les pages HTML utilisant le code CSS généré en sélectionnant l’affichage en direct ou l’aperçu en temps réel.

Dreamweaver 2015 et les préprocesseurs CSS

Vous pouvez utiliser des fichiers Sass, LESS et SCSS avec Dreamweaver 2015 et les versions CC antérieures. Cependant, vous devez compiler vos fichiers manuellement en-dehors de Dreamweaver.
Le processus à suivre est semblable à celui-ci :

1. Téléchargez et installez un compilateur.
2. Configurez une tâche Grunt (Gruntfile.js) pour que le compilateur puisse lire le fichier Sass/LESS/SCSS.
3. Configurez une autre tâche Grunt pour compiler le fichier en code CSS avant de l’importer dans Dreamweaver.

Vous devez effectuer ces opérations chaque fois que vous apportez une modification à votre fichier Sass/LESS/SCSS.

Si vous n’avez pas défini de site, vous pouvez choisir de compiler manuellement vos fichiers Sass et LESS. Toutefois, l’assistance pour les frameworks Compass et Bourbon n’est disponible.

Comment utiliser les préprocesseurs CSS dans Dreamweaver ?

Voici une description générale des tâches impliquées lors de l’utilisation de préprocesseurs CSS :

1. Définissez un site dans Dreamweaver. Veillez à ce que le fichier Sass ou LESS que vous essayez de compiler figure dans le dossier racine du site. Si vous avez déjà défini un site et que le fichier Sass/LESS est inclus à la racine du site, passez à l’étape suivante. Pour plus d’informations sur la configuration d’un site Dreamweaver, consultez la section À propos des sites Dreamweaver.
2. Définissez des préférences pour les préprocesseurs CSS (tels que la définition de l’emplacement des fichiers CSS générés). Ces préférences sont propres au site. Pour plus d’informations, consultez la section Définition des préférences de préprocesseurs CSS spécifiques au site.
3. Si vous souhaitez utiliser des frameworks spécifiques, tels que Compass ou Bourbon, vous pouvez spécifier les paramètres correspondants. Pour plus d’informations, consultez la section Utilisation du framework Compass ou Utilisation du framework Bourbon.
4. Configurez la compilation automatique ou compilez manuellement vos fichiers Sass et LESS. Pour plus d’informations, consultez la section Compilation des fichiers de préprocesseur CSS.

Définition des préférences pour les préprocesseurs CSS

Vous pouvez définir des préférences propres au site pour les préprocesseurs CSS via la boîte de dialogue Sites > Gérer les sites.

Enregistrer des préférences propres à chaque site pour votre préprocesseur CSS vous permet de gérer celui-ci en fonction des spécificités de chaque site. Cela permet également de contrôler le préprocesseur CSS comme vous le souhaitez en fonction du site sans avoir à modifier vos préférences chaque fois que vous changez de site.

Définition des paramètres généraux de préprocesseur CSS

Vous pouvez définir les paramètres généraux suivants de préprocesseur CSS sous Sites > Gérer les sites > Préprocesseurs CSS. Par défaut, ces paramètres s’appliquent au framework Saas.

Cochez cette case pour activer la compilation automatique des préprocesseurs CSS. Si vous sélectionnez cette option, Dreamweaver génère automatiquement un fichier CSS lorsque vous enregistrez votre fichier Sass, LESS ou SCSS. Si cette option est décochée, vous devez compiler manuellement les fichiers chaque fois que vous apportez une modification.

Options LESS

Traite uniquement les opérations mathématiques qui sont entre parenthèses. Par exemple, (100px/25px) est correctement traité, tandis que 20 % + 10 % (sans parenthèses) n’est pas traité. Lorsque cette option est désactivée, toutes les opérations mathématiques du fichier sont traitées.

Sans cette option, le code LESS tente de deviner l’unité de sortie lors des opérations mathématiques. Exemple :

Dans ce cas, une longueur multipliée par une longueur donne une zone, mais le langage CSS ne prend pas en charge la spécification des zones. Dreamweaver suppose que l’utilisateur voulait dire que l’une des valeurs était une valeur, et non pas une unité de longueur.

Avec l’option Strict Units activée, Dreamweaver suppose que le calcul comporte une faute et affiche une erreur.

Lorsque cette option est activée, les URL sont réécrites dans le fichier CSS généré afin que les URL soient toujours relatives au fichier généré. 

Crée une mappe source. Une mappe source est un fichier qui fait le lien entre les langages de niveau supérieur comme Sass ou LESS, et le langage de niveau inférieur, tel que CSS, vers lequel ils sont compilés.

Options Sass/SCSS

Spécifie le style du fichier de sortie CSS :

• Imbriqué - Met en forme le fichier CSS compilé selon la structure modulaire classique.
• Réduit - Met en forme le fichier CSS compilé selon une structure compacte, qui prend moins d’espace que les structures imbriquée ou développée.
• Compressé - Génère le fichier CSS sous forme de structure plate.
• Développé - Génère le fichier CSS de manière développée avec chaque propriété et règle prenant une ligne. Les propriétés sont incluses dans les règles, mais les règles ne sont pas incluses de quelque manière que ce soit. 

Crée des commentaires dans le fichier CSS de sortie qui met en correspondance le code CSS avec la ligne à partir de laquelle il a été généré.

Crée une mappe source (fichier qui fait le lien entre les langages de niveau supérieur comme Sass ou LESS, et le langage de niveau inférieur, tel que CSS, vers lequel ils sont compilés). 

Définition des préférences de source et de sortie CSS

Vous pouvez spécifier où placer les fichiers CSS générés ainsi que le chemin d’accès que Dreamweaver doit surveiller et sur lequel déclencher la compilation automatique lorsqu’un fichier Sass/LESS dans le chemin d’accès est modifié à l’aide d’un éditeur externe.

Vous pouvez définir les paramètres suivants du préprocesseur CSS pour la source et la sortie dans Sites > Gérer les sites.

Sortie CSS

Spécifiez l’emplacement du fichier de sortie de CSS qui est généré.

Sélectionnez cette option si vous souhaitez que les fichiers CSS générés soient enregistrés dans le même dossier que les fichiers source Sass et LESS.

Choisissez cette option et spécifiez un dossier où vous voulez enregistrer les fichiers CSS générés.

Cette option vous permet de remplacer une partie du chemin d’accès en utilisant les chaînes De et À. Par exemple, lors de la configuration des options De : scss et À : scss, le fichier de sortie est placé à l’intérieur de la même structure d’arborescence après remplacement de SCSS dans le CSS du chemin d’accès.

Spécifie le sous-dossier à la racine du site à surveiller. En général, ce sous-dossier contient tous vos fichiers SCSS ou Less. 

Si vous avez activé la compilation dans Paramètres généraux, Dreamweaver déclenche automatiquement le préprocesseur CSS. La compilation automatique se déclenche lorsqu’un fichier du dossier est modifié depuis Dreamweaver ou en-dehors de l’application.

Utilisation du framework Compass

Compass est un outil de développement CSS open-source qui vous permet de créer des feuilles de style CSS3 à l’aide de Sass.

Dreamweaver propose une prise en charge de Compass. Si vous créez des feuilles de style avec Compass, vous pouvez les compiler et générer des fichiers CSS à partir de Dreamweaver.

Utilisation du framework Bourbon

Dreamweaver prend en charge la gamme de produits Bourbon. Si vous créez des feuilles de style avec Bourbon, vous pouvez ensuite les compiler et générer des fichiers CSS à partir de Dreamweaver.

Les versions suivantes de Bourbon sont prises en charge :

• Bourbon - une bibliothèque de mélange simple et léger, destinée au langage Sass
• Bourbon Neat - un framework de grille sémantique, simple et moderne, pour les langages Sass et Bourbon
• Bourbon Bitters - styles d’échafaudage, variables et structure pour des projets Bourbon

Vous pouvez importer le framework Bourbon en ajoutant l’un des éléments suivants à votre code :

• @import “bourbon“ (pour importer Bourbon)
• @import “neat” (pour importer Bourbon Neat)
• @import “base” (pour importer Bourbon Bitter)

Dreamweaver utilise ensuite la version prédéfinie de Bourbon lors de la compilation des fichiers de préprocesseur.

Sinon, vous pouvez installer les fichiers du framework Bourbon sur votre site, de sorte que les mises à jour éventuelles de Dreamweaver n’affectent pas vos flux de compilation. Les fichiers du framework Bourbon sont copiés sur votre site. Bourbon est le framework qui est utilisé lorsque la compilation est déclenchée pour les fichiers qui importent le framework.

Installation des fichiers Bourbon, Bourbon Neat ou Bourbon Bitters

Pour installer Bourbon ou l’une de ses versions :

Compilation des fichiers de préprocesseur CSS

Vous pouvez compiler des fichiers de préprocesseur CSS de l’une des façons suivantes :

• Configuration de la compilation automatique des fichiers de préprocesseur CSS
• Compilation manuelle d’un fichier de préprocesseur CSS

Configuration de la compilation automatique des fichiers de préprocesseur CSS

Vous pouvez configurer des options dans Dreamweaver afin de compiler automatiquement les changements effectués sur un fichier Sass ou LESS dans son équivalent CSS. Vous pouvez également spécifier les emplacements (à la racine du site) où vous souhaitez enregistrer le fichier CSS généré.

Lorsqu’une compilation a réussi, un message s’affiche dans le panneau Sortie (Fenêtre > Résultats > Sortie). L’icône d’état s’affiche en vert dans la barre d’état. Pour ouvrir le fichier CSS compilé, double-cliquez sur le message de réussite dans le panneau.

Si des erreurs sont détectées, cela signifie que le code CSS ne s’est pas compilé correctement. L’icône d’état s’affiche en rouge et le panneau Sortie répertorie toutes les erreurs et tous les avertissements. Vous pouvez double-cliquer sur un message d’erreur dans le panneau pour accéder rapidement à la ligne erronée dans le code. Le fichier CSS ne se compile pas correctement tant que toutes les erreurs ne sont pas résolues.

Une fois que vous avez obtenu le fichier CSS compilé, vous pouvez lier votre page web à la feuille de style. Lorsque vous apportez des modifications aux préprocesseurs CSS, les fichiers CSS compilés correspondants sont automatiquement mis à jour. La page web est également automatiquement actualisée en mode En direct.

Pour plus d’informations sur la création de liens entre votre page web et la feuille de style, consultez la section Établissement d’un lien vers une feuille de style CSS externe.

Compilation manuelle d’un fichier de préprocesseur CSS

Dans certains cas (notamment si vous n’avez pas défini de site Dreamweaver), vous pouvez avoir besoin de compiler manuellement un fichier de préprocesseur CSS.

Dans ce cas, désactivez la case Compilation auto sur enregistrement de fichier dans le panneau Préprocesseurs CSS > Général de la boîte de dialogue Configuration de site.

Pour compiler manuellement un préprocesseur CSS, cliquez avec le bouton droit de la souris sur le fichier dans le panneau Fichiers, puis cliquez sur Compiler.

Vous pouvez également cliquer sur Outils > Compiler pour compiler le fichier actuel.