Compilation Sass en CSS dans Sublime Text est possible avec un plugin appelé SassBuilder, que vous pouvez installer par Package Control (voir capture d’écran) ou vous pouvez installer le plugin en utilisant ce lien.
Fichier de configuration
Avant de pouvoir compiler Sass, vous devez créer un fichier de configuration, ce qui est similaire à la config.rb que vous pouvez trouver dans un projet de Compass. Pour créer le fichier, allez dans Outils-> Sass Builder Config dans Sublime Text. Enregistrez le fichier dans le même dossier où vous stockez vos fichiers ou .scss .sass, et nommez-le .sassbuilder-config
Vous pouvez ensuite configurer la sortie de vos styles compilés dans ce fichier, et voici la configuration par défaut:
[dt_code]
{
«output_path»: «../css»,
«options»: {
«cache»: true,
«debug»: true,
«line-comments»: true,
«line-numbers»: true,
«style»: «nested»
}
}
[/dt_code]
SassBuilder va générer les commentaires et les numéros de ligne qui nous disent où les sélecteurs et le style de règles ont été définis. Elles sont utiles lorsque vous êtes dans la phase de développement, mais quand vous êtes sur le point de publier le site Web, vous auriez probablement besoin de les enlever. Pour ce faire, réglez la valeur de la ligne-commentaire et numéro de ligne de faux, comme tel.
[dt_code]
{
«output_path»: «../css»,
«options»: {
«cache»: true,
«debug»: true,
«line-comments»: false,
«line-numbers»: false,
«style»: «compressed»
}
}
[/dt_code]
L’option de style spécifie le style CSS pour la compiler – vous pouvez choisir entre Nested, Expanded ou Compressed. Sass compilera automatiquement en CSS lors de l’enregistrement du fichier. Si le processus a été complété avec succès, vous obtiendrez la notification suivante (capture d’écran).
Et c’est ça, les gars. Nous espérons que vous avez trouvé ce petit tutoriel utile. Si vous avez des questions, s’il vous plaît n’hésitez pas à le poster dans les commentaires ci-dessous.