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.

Cela peut vous intéresser :

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.