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éprocessé élève le CSS à un niveau plus proche d'un langage de programmation.

En particulier, les préprocesseurs vous permettent d'utiliser des variables, des mix-ins, des fonctions et de nombreuses autres techniques qui
ne sont pas possibles en CSS.Grâce aux préprocesseurs CSS, vous pouvez tout définir une seule fois et réutiliser ces définitions à volonté, ce qui permet d'obtenir un CSS maintenable et extensible.

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 référencent un certain nombre de fichiers CSS, l'utilisation de préprocesseurs CSS comme Sass ou Compass peut réduire le codage manuel et les actions de copier/coller.

Dreamweaver utilise un compilateur Ruby-Sass intégré permettant de compiler les fichiers SCSS et LESS. Dreamweaver 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 CSS à l'aide de la bibliothèque JavaScript less.js, lorsque vous chargez, modifiez ou enregistrez 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

Gestion des préprocesseurs CSS par Dreamweaver

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 configurer les préférences des préprocesseurs CSS et également 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éprocesseur spécifiques à chaque site.

Poursuivez votre lecture pour savoir comment utiliser Dreamweaver avec les 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 reflètent également dans tous les fichiers HTML ouverts où ce CSS compilé est lié ou joint.

Voici un workflow de haut niveau des tâches impliquées lors de l'utilisation des préprocesseurs CSS :

• Installez le compilateur approprié si vous souhaitez utiliser Compass ou Bourbon dans Dreamweaver. Cette installation se fait en un clic. Configurez vos 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 création sont supprimés dans les révisions ultérieures, vous pouvez toujours accéder aux fichiers de préprocesseur dans 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 reflètent dans l'aperçu en direct ou l'aperçu en temps réel dans toutes les page HTML où le CSS généré est utilisé.

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 deviez compiler ces fichiers vous-même en dehors de l'Application Dreamweaver.
Votre processus ressemblerait aux étapes suivantes :

1. Téléchargez et installez un compilateur.
2. Configurez une tâche grunt (Gruntfile.js) pour que le compilateur lise votre fichier Sass/LESS/SCSS.
3. Configurez une autre tâche grunt pour compiler le fichier en CSS, que vous intégreriez ensuite dans Dreamweaver.

Vous devez effectuer ces étapes 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 cadres Compass et Bourbon n'est pas prise en charge.

Comment utiliser les préprocesseurs CSS dans Dreamweaver ?

Voici un aperçu général du processus 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 À 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 Définition des préférences de préprocesseur CSS spécifiques à un 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 : 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 Compilation de fichiers de préprocesseur CSS.

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

Vous pouvez définir des préférences spécifiques au site pour les préprocesseurs CSS en utilisant 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. Cette action vous donne également le contrôle sur le préprocesseur CSS pour chaque site, sans avoir à mettre à jour les 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 n'est pas sélectionné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, tous les calculs mathématiques dans le fichier sont traités.

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

.class {

property: 1px * 2px;

}

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 que l'une des valeurs soit une valeur et non une unité de longueur.

Avec les unités strictes activées, Dreamweaver suppose qu'il s'agit d'une erreur de calcul et lève une erreur.

Cette option vous permet de réécrire les URL 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 carte source est un fichier qui fait le lien entre les langages de haut niveau comme Sass et LESS, et le langage de bas niveau vers lequel ils compilent, comme CSS.

Options Sass/SCSS

Spécifie le style du fichier de sortie CSS :

• Imbriqué - Formate le CSS compilé dans une structure modulaire bien connue.
• Compact - Met en forme le CSS compilé dans une structure compacte qui occupe moins d'espace que Imbriqué ou Développé.
• Compressé - Génère le CSS dans une 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 mises en retrait dans les règles, mais les règles ne sont mises en retrait en aucune manière. 

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

Crée une carte source (fichier qui fait le pont entre les langages de haut niveau comme Sass et LESS, et le langage de bas niveau vers lequel ils compilent, tel que CSS). 

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

Vous pouvez définir où les fichiers CSS générés doivent être placés, et le chemin d'accès que Dreamweaver doit surveiller et 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 de préprocesseur CSS source et de sortie suivants dans la boîte de dialogue Sites > Gérer les sites.

Sortie CSS

Spécifiez l'emplacement du fichier CSS de sortie généré.

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

Sélectionnez 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, en définissant De : scss et Vers : css, le fichier de sortie est placé dans la même structure arborescente après avoir remplacé SCSS par css dans le chemin.

Spécifie le sous-dossier à la racine du site à surveiller. Habituellement, 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. Dreamweaver déclenche l'autocompilation lorsqu'un fichier du dossier est modifié de l'extérieur ou depuis Dreamweaver.

Utilisation du framework Compass

Compass est 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 compiler ces feuilles de style et générer des fichiers CSS depuis 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 compiler ces feuilles de style et générer des fichiers CSS depuis Dreamweaver.

Les variantes Bourbon suivantes sont prises en charge :

• Bourbon - Une bibliothèque de mixins simple et légère pour Sass
• Bourbon Neat - Un framework de grille sémantique léger pour 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 dans votre code :

• @import "bourbon" – pour importer Bourbon
• @import "neat" – pour importer Bourbon Neat
• @import "base" – pour l'import de Bourbon Bitter

Dreamweaver utilise alors la version prépackagée 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 tous les fichiers qui importent le framework.

Installation des fichiers Bourbon, Bourbon Neat ou Bourbon Bitters

Pour installer Bourbon ou l'une de ses variantes :

Compilation des fichiers de préprocesseur CSS

Vous pouvez compiler les fichiers de préprocesseur CSS de l'une des manières suivantes :

• Configuration de la compilation automatique des fichiers de préprocesseur CSS
• Compiler manuellement 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 (dans la racine du site) où vous souhaitez enregistrer le CSS généré.

Après une compilation réussie, un message s'affiche dans le panneau Sortie (Fenêtre > Résultats > Sortie). L'icône de statut dans la barre de statut s'affiche en vert. Pour ouvrir le 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 n'est pas compilé avec succès 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 actualisée automatiquement en mode En direct.

Pour plus d'informations sur la liaison de votre page web à la feuille de style, voir Lier à une feuille de style CSS externe.

Compilation manuelle d’un fichier de préprocesseur CSS

Dans certaines situations (par exemple si vous n'avez pas défini d'emplacement Dreamweaver), vous pourriez vouloir compiler manuellement un fichier de préprocesseur CSS.

Dans de tels scénarios, désactivez Activer la compilation automatique lors de l'enregistrement du fichier dans le panneau Préprocesseurs CSS > Général de la boîte de dialogue Configuration d'emplacement.

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

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