Utiliser Sass avec le logiciel Brackets

Cet article vous présente tout ce qu’il faut savoir afin d’utiliser le pré-processeur SASS pour vos projets web sur le logiciel Brackets.

Installer l’extension brackets-sass

Ouvrez le gestionnaire d’extension de brackets, Fichier / Gestionnaire d’extensions….

Recherchez l’extension Brackets SASS puis cliquez sur le bouton Installer.

Fenêtre des extensions disponibles dans Brackets

Comme vous pouvez le voir dans le fichier de préférences de Brackets, le pré-processeur est maintenant actif par défaut.

Aperçu des paramètres par défaut

Par défaut, l’extension utilise libsass. Le compiler Ruby peut être configuré à la place si vous le souhaitez en utilisant l’option "sass.compiler": "ruby". Ce sera par ailleurs nécessaire si vous souhaitez utiliser compass.

Personnaliser Sass pour un projet

La personnalisation du pré-processeur peut facilement se faire via une fichier .brackets.json à l’intérieur du dossier de votre projet web en utilisant les options dont vous pouvez trouver la liste complète sur le github de l’extension : https://github.com/jasonsanjose/brackets-sass

Ouvrez le dossier de votre projet dans Brackets.

Créez, à la racine de votre projet, un dossier scss contenant un fichier intitulé styles.scss.

Créez un dossier vide css qui contiendra les fichiers compilés.

À la racine du projet créez un fichier avec le nom .brackets.json. Les options vont maintenant dépendre de vos besoins.

  • En phase de développement :
{
    "sass.enabled": false,
    "path": {
        "scss/styles.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/",
                "includePaths": [],
                "sourceComments": true,
                "outputStyle": "nested"
            }
        }
    }
}
  • En phase de production :
{
    "sass.enabled": false,
    "path": {
        "scss/styles.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/",
                "includePaths": [],
                "sourceComments": false,
                "outputStyle": "compressed"
            }
        }
    }
}
  • Si vous avez des sous-dossiers pour les partials :

Vous pouvez personnaliser l’option includePaths avec les dossiers que vous souhaitez intégrer dans le processus de compilation.

{
    "sass.enabled": false,
    "path": {
        "scss/styles.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/",
                "includePaths": ["partials"],
                "sourceComments": false,
                "outputStyle": "compressed"
            }
        }
    }
}

Extensions complémentaires

  • Brackets Sass Lint : permet d’avoir des informations complémentaires lors de la compilation d’un fichier scss.
  • Brackets Sass Hints : permet d’avoir l’autocomplétion pour Sass.

Sauf mention contraire*, l'article Utiliser Sass avec le logiciel Brackets et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

2 réactions sur “ Utiliser Sass avec le logiciel Brackets ”

  1. Zaandriygasy Réponse

    j ai suivi etape par etape mais ca ne marche pas, error: SCSS has timed out after waiting for 10000 ms

    • Julien Crego Auteur ArticleRéponse

      Bonjour,
      Utilisez-vous un fichier .bracket.json ? Si c’est le cas, il faudrait vérifier que vous n’avez pas de caractères indésirables. Cela peut venir du copier/coller ou des guillemets qui sont mal encodés (à réécrire manuellement si c’est ça).
      Si vous n’avez pas de fichier .bracket.json, je vous recommande de réinstaller l’extension.

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.