Configurer un projet Netbeans avec SASS

Cet article vous propose de configurer un projet NetBeans pour utiliser SASS afin de compiler et de compresser vos fichiers CSS.

Pour pouvoir utiliser SASS, vous devez l’avoir installé au préalable. Si ce n’est pas encore fait, vous pouvez consulter le tutoriel suivant : Installer SASS.

Création du projet sur NetBeans

La première étape est la création d’un projet sur NetBeans.

Créez ensuite deux dossiers :

  • scss : qui contiendra les fichiers SASS,
  • css : qui contiendra les fichiers CSS compilés.

Fenêtre de Netbeans avec panneau projets

Activation de SASS

Pour paramétrer SASS, vous devez aller dans les propriétés du projet. Effectuez un clic droit sur le nom du projet, puis Properties.

Dans la liste des Catégories de la fenêtre qui s’ouvre, choisissez CSS Preprocessors.

Avant de commencer le paramétrage dans cette fenêtre, nous devons d’abord configurer les exécutables. Pour cela, cliquez sur le bouton Configure Executables… (en haut à droite).

Dans la fenêtre qui s’affiche, cliquez sur Install Sass ou utilisez le bouton Browse pour le retrouver en fonction de l’emplacement où vous l’avez installé.

Si vous utilisez Compass, vous pouvez ajouter le code --compass à la suite du nom du dossier de SASS comme dans l’illustration ci-dessous. Vous devez bien évidemment avoir installé Compass au préalable.

Fenêtre de configuration des exécutables

Vous pouvez ensuite revenir à la fenêtre précédente en cliquant sur OK.

Paramètres de SASS pour le projet

Dans la fenêtre des propriétés du projet (accessible via un clic droit sur le nom du projet, puis Properties), choisissez CSS Preprocessors dans la liste des Catégories.

Commencez par cocher la case Compile Sass Files on Save pour activer la compilation automatique dès que vous enregistrez des modifications sur un fichier Sass.

Dans la zone Watch, vous devez configurer le dossier à surveiller, qui contient les fichiers Sass à compiler ainsi que le dossier de sortie qui recevra les fichiers CSS compilés. Netbeans propose par défaut /scss dans entrée et /css en sortie. Cela correspond à mon projet donc je n’ai rien à faire mais il faut bien veiller à personnaliser les chemins d’accès corrects vers les dossiers en fonction de l’arborescence de vos projets.

La dernière chose à faire est de saisir les options de compilation --style compressed pour demander une compression du fichier lors de la compilation.

Fenêtre de configuration des préprocesseurs CSS

Tout est prêt, vous pouvez quitter en cliquant sur OK.

Test de Sass

On peut donc faire un test en créant un nouveau fichier Sass dans le dossier scss.

Effectuez un clic droit sur le dossier New / Sass File…

Dès que l’on créé un nouveau fichier Sass, un fichier avec le même nom mais l’extension .css est créé automatiquement dans le dossier css. Il est accompagné d’un fichier .css.map dont nous n’allons pas nous soucier.

Ouvrez le fichier /scss/styles.scss et saisissez quelques définitions CSS.

Enregistrez.

Dans la partie basse de NetBeans, le volet Output devrait vous afficher les informations de compilation. Si le volet n’est pas visible : Menu Windows / Output.

"/usr/bin/sass" "--compass" "--cache-location" "/Users/julien/Library/Caches/NetBeans/8.1/sass-compiler" "--style" "compressed" "/Users/julien/Sites/Demo_SASS/scss/styles.scss" "/Users/julien/Sites/Demo_SASS/css/styles.css"
Done.

Il n’y a pas d’erreur, la compilation s’est donc passée correctement.

Test d'une compilation SASS

Vous pouvez maintenant ouvrir le fichier /css/styles.css pour constater qu’il contient la version compilée et compressée du fichier /scss/styles.scss.

Tout est automatique. Vous pouvez travailler sur votre fichier /scss/styles.scss sans vous soucier du fichier /css/styles.css qui sera utilisé dans votre site.

Attention toutefois aux erreurs éventuelles de compilation si vous faites une erreur de code. Toutes les erreurs sont indiquées dans la fenêtre Output.

Cela peut vous intéresser :

2 réactions sur “ Configurer un projet Netbeans avec SASS ”

  1. MERYEM Réponse

    bonjour,
    je suis dans une entreprise qui n’a jamais travaillé avec sass/compass, impossible pour moi de refaire tous les fichiers css en scss, et c’est rare que je crée de nouveau fichier css, je fais en general des modifs.

    la questione st : est ce que je pourrais travailler ou utiliser sass dans mon cas ?

    • Julien Crego Auteur ArticleRéponse

      Oui cela ne pose aucun problème ! La syntaxe CSS classique est heureusement compatible avec SASS. Il est donc tout à fait possible de n’utiliser SASS que pour la compression du fichier CSS…
      Par ailleurs rien n’empêche de copier/coller le CSS d’un fichier existant dans une fichiers scss et d’utiliser la syntaxe SASS au fur et à mesure. On peut commencer par exemple par mettre les couleurs principales en variables… puis progressivement exploiter la puissance des préprocesseurs CSS !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.