Utiliser Sass avec le logiciel Brackets

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

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

Comme vous pouvez le voir dans le fichier de préférences de Brackets, le pré-processeur est maintenant actif par défaut. Les préférences sont accessibles via le menu Déboguer / Ouvrir le fichier de préférences.

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"
            }
        }
    }
}