Découvrez comment utiliser et compiler des fichiers de préprocesseur CSS dans Dreamweaver.

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 dans CSS.
Les préprocesseurs CSS vous permettent de ne définir tous les éléments qu'une seule fois et de les réutiliser à maintes reprises, générant ainsi un code CSS facile à mettre à jour, thématiser et développer.

Dreamweaver prend en charge les préprocesseurs CSS les plus connus, Sass et Less, ainsi que les cadres (frameworks) Compass et Bourbon pour l’assemblage des fichiers Sass.

Less se base sur JavaScript et Sass sur Ruby, mais vous ne devez rien connaître sur ces langues, ni 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.

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. Adobe recommande de définir un site parce que ce dernier vous permet de configurer des préférences de préprocesseur CSS, et également d'utiliser les cadres Compass et Bourbon dans Dreamweaver. 

Si vous avez défini 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.

Lorsque vous définissez un site, Dreamweaver vous permet également d'utiliser des cadres Sass tels que Compass, Bourbon, Bourbon Neat et Bourbon Bitters au sein de Dreamweaver.

Si vous n'avez pas de site défini, vous pouvez choisir de compiler manuellement vos fichiers Sass et Less. Toutefois, l’assistance pour les cadres 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 en cas d’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 dans 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 cadres spécifiques, tels que Compass ou Bourbon, vous pouvez spécifier les paramètres correspondants. Pour plus d’informations, consultez la section Utilisation du cadre Compass ou Utilisation du cadre 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 en utilisant Sites > boîte de dialogue Gérer les sites.

Maintenir les préférences de préprocesseur CSS spécifiques au site vous permet de gérer vos préprocesseurs CSS sur la base d'un site, ce qui vous donne le contrôle sur chaque préprocesseur CSS de site individuel, sans que vous deviez 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 de préprocesseurs CSS suivants sous Sites > Gérer les sites > Préprocesseurs CSS. 

Paramètres généraux de préprocesseur CSS
Paramètres généraux de préprocesseur CSS

Activation de la compilation automatique sur enregistrement de fichier

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

Activer l’option Strict Math

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.

Activation de l’option Strict Units

Génère une unité déduite dans le fichier CSS après l'opération mathématique. Par exemple, 5px * 2px est compilé en tant que 10px et non en tant que 10px2. 

Lorsque cette option est désactivée, Less tente de déterminer l'unité de sortie lorsqu'il traite les opérations mathématiques.

Dans cet exemple, le CSS est généré comme suit :

.class {
  property: 1px * 2px;
}

Dans ce cas, la supposition n'est pas correcte. Une longueur multipliée par une longueur donne une zone, mais CSS ne prend pas en charge la spécification de zones. Ici, il est supposé que l'utilisateur souhaitait qu'une des valeurs émises par Dreamweaver, 10px, soit considérée comme étant une valeur et non une unité de longueur.

Lorsque l'option Strict Units est activée, ce CSS généré est considéré comme étant une erreur.

Transformation d'URL en URL relatives

Réécrit les URL dans les fichiers importés afin qu'elles soient toujours relatives au fichier importé de base. Par conséquent, si un fichier Less importe un autre fichier Less, qui fait à son tour référence à une image, l'URL relative s'affiche dans le fichier CSS compilé.

Génération de la carte source

Crée une carte source (le fichier qui fait le lien entre les langues de niveau supérieur telles que Sass et Less qui se compilent à des langues de niveau inférieur comme CSS).

Options Sass/SCSS

Style du fichier de sortie

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éer des commentaires source

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é.

Génération de la carte source

Crée une carte source (le fichier qui fait le lien entre les langues de niveau supérieur telles que Sass et Less et les langues de niveau inférieur ; elles se compilent à par exemple CSS). 

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.

Paramètres du préprocesseur CSS pour la source et la sortie
Paramètres du préprocesseur CSS pour la source et la sortie

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

Sortie CSS

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

Dans le même dossier que la source

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.

Définition du dossier de sortie

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

Remplacement du segment du chemin d'accès d'entrée

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.

Dossier source

Spécifiez le sous-dossier dans la racine du site qui doit être visionné. En général, ce sous-dossier contient tous vos fichiers SCSS ou Less. 

Si vous avez activé la compilation dans les paramètres généraux, Dreamweaver déclenche automatiquement le préprocesseur CSS lorsqu'un fichier figurant dans ce dossier est modifié en externe, ou à partir de Dreamweaver.

Utilisation du cadre 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. Ainsi, si vous créez des feuilles de style au moyen de Compass, vous pouvez ensuite compiler ces feuilles de style et générer des fichiers CSS à partir de Dreamweaver.

  1. Installation de fichiers Compass

    Si Compass n’est pas déjà installé, vous pouvez l’installer depuis Dreamweaver.

    Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass. Sélectionnez Utiliser Compass, puis cliquez sur Installer les fichiers.

    Installation des fichiers Compass
    Installation des fichiers Compass

    Tous les fichiers Compass et le fichier de configuration *.rb sont installés dans le dossier de votre site. Vous pouvez les afficher dans le panneau Fichiers.

    Fichiers Compass installés
    Fichiers Compass installés

  2. Spécification d’un fichier de configuration existant basé sur Ruby

    Si Compass est déjà installé sur vos ordinateurs et que votre fichier Compass *.rb est déjà configuré, spécifiez, depuis la boîte de dialogue Configuration du site de Dreamweaver, le chemin d'accès au fichier Compass *.rb dans le site racine actuel.

    1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass.
    2. Cochez la case Utiliser Compass.
    3. Cliquez sur Spécification d’un fichier de configuration existant basé sur Ruby, puis accédez à l’emplacement du fichier. Quand c’est fait, cliquez sur Enregistrer.
    Spécification d'un fichier de configuration existant basé sur Ruby
    Spécification d'un fichier de configuration existant basé sur Ruby

    Remarque :

    Ce fichier doit se trouver dans le dossier racine de votre site.

  3. Spécification manuelle des options de configuration

    Si vous n’avez pas d’options de configuration existantes, vous pouvez choisir de les spécifier manuellement.

    1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass.
    2. Cochez la case Utiliser Compass.
    3. Cliquez sur Spécification manuelle des options de configuration. Définissez les options de configuration suivantes et cliquez sur Enregistrer.

    Les champs suivants sont renseignés automatiquement, mais vous pouvez les modifier selon vos besoins :

    Remarque :

    Tous les chemins d'accès sélectionnés dans ces options doivent se trouver dans le site racine.

    Chemin d'accès HTTP

    Le chemin d’accès au projet lors de l’exécution sur le serveur web. Par défaut vers « / ».

    Répertoire Images

    Le répertoire où sont conservées les images. Il est lié à project-path.

    Répertoire des images générées

    Le répertoire où sont générées les images. Il est lié à project_path. Valeur par défaut images_dir.

    Répertoire Polices

    Le répertoire où sont conservés les fichiers de polices.

    Ressources relatives

    Indique si les fonctions d’assistance de Compass doivent générer des URL relatives à partir du CSS généré en ressources, ou des URL absolues en utilisant le chemin d’accès HTTP pour ce type de ressource.

  4. Si vous avez choisi l’option « Activation de la compilation automatique sur enregistrement de fichier » dans la boîte de dialogue Sites > Gérer les sites > Préprocesseurs CSS, Dreamweaver génère un fichier CSS chaque fois que vous enregistrez des modifications dans vos fichiers Sass. Vous pouvez également afficher l’aperçu de ces modifications en temps réel dans la fenêtre de votre navigateur. Pour plus d’informations sur l’aperçu de vos modifications en temps réel dans le navigateur, consultez la section Aperçu en temps réel.

    Si vous ne souhaitez pas de compilation automatique, vous pouvez compiler manuellement un fichier CSS en procédant de l’une des manières suivantes :

    • Dans le panneau fichiers, cliquez avec le bouton droit de la souris sur le fichier Sass, Less ou SCSS, puis cliquez sur Compiler. 
    • Cliquez sur Outils > Compiler pour compiler le fichier actuel.
  5. Vous pouvez ensuite associer votre fichier CSS compilé aux fichiers HTML de votre site. Pour plus d’informations, consultez la section Établissement d’un lien vers une feuille de style CSS externe.

Utilisation du cadre Bourbon

Dreamweaver prend en charge la gamme de produits Bourbon. Ainsi, si vous créez des feuilles de style au moyen de Bourbon, vous pouvez ensuite compiler ces feuilles de style 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 cadre 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 cadre 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 cadre Bourbon sur votre site, de sorte que les mises à jour éventuelles de Dreamweaver n’affectent pas vos flux de travaux de compilation. Les fichiers du cadre Bourbon sont copiés vers votre site et c'est ce cadre qui est utilisé lors du déclenchement de la compilation pour les fichiers qui importent le cadre.

Installation des fichiers Bourbon, Bourbon Neat ou Bourbon Bitters

Pour installer Bourbon ou l'une de ses versions :

  1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Bourbon, Bourbon Neat ou Bourbon Bitters.

  2. Cliquez sur Installer les fichiers pour installer les fichiers dans l'emplacement du dossier racine du site spécifié au sein de votre site.

    Installation des fichiers Bourbon
    Installation des fichiers Bourbon

    Tous les fichiers Bourbon sont installés dans le dossier de votre site, et vous pouvez les afficher dans le panneau Fichiers.

    Fichiers Bourbon installés
    Fichiers Bourbon installés

    En cas d'échec, les erreurs sont affichées dans le panneau Sortie (Fenêtre > Résultats > Sortie) et l'icône de la barre d'état devient rouge.

Compilation des fichiers de préprocesseur CSS

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

Configurez la compilation automatique des fichiers de préprocesseur CSS

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

  1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Général > Activation de la compilation automatique sur enregistrement de fichier.

    Activation de la compilation automatique
    Activation de la compilation automatique

  2. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Source et sortie.

  3. Dans la boîte de dialogue Source et sortie, spécifiez les emplacements où vous souhaitez enregistrer vos fichiers CSS générés. Vous pouvez choisir l'une des options suivantes :

    Dans le même dossier que la source

    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.

    Définition du dossier de sortie

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

    Remplacement du segment du chemin d'accès d'entrée

    Cette option vous permet de remplacer une partie du chemin d'accès en utilisant les chaînes De et À.

  4. Spécifiez le dossier contenant les fichiers Sass ou Less que Dreamweaver doit « visionner ». 

    Si vous apportez des modifications à l'un des fichiers de ce dossier contrôlé, Dreamweaver compile automatiquement les fichiers après leur enregistrement. 

    Paramètres du préprocesseur CSS pour la source et la sortie
    Paramètres du préprocesseur CSS pour la source et la sortie

    Remarque :

    Dreamweaver visionne et compile ces fichiers, même si vous apportez des modifications en dehors de Dreamweaver (à l'aide d'un éditeur de texte, par exemple).

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

Si des erreurs sont détectées, cela signifie que le fichier CSS ne s’est pas compilé correctement. L'icône d'état s'affiche en rouge <icon> 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.

Remarque :

Le panneau Sortie est généralement ancré au bas de l'espace de travail. Si le panneau est fermé, vous pouvez l'ouvrir à l'aide de Fenêtre > panneau Sortie.

Vous pouvez également activer le panneau Sortie (afficher/masquer) à l'aide de l'icône d'état lorsque cette dernière est rouge.

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 souhaiter compiler manuellement un fichier de préprocesseur CSS.

Dans de telles situations, désactivez Activation de la compilation automatique sur enregistrement de fichier dans Préprocesseurs CSS > panneau Général de la boîte de dialogue de 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.

Compilation manuelle de fichiers de préprocesseur CSS via le panneau Fichiers
Compilation manuelle de fichiers de préprocesseur CSS via le panneau Fichiers

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

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne