Sass et Sublime Text 3

Sass & Sublime text
Sass build, Sublime Text

Ruby

Sass , Syntactically Awesome Style Sheets, a besoin de Ruby pour fonctionner. Si l’on ne dispose pas encore de Ruby, installez-le. Ruby possède un installateur automatique pour Windows. Ne pas oublier de laisser cocher la case Add Ruby executables to your PATH.

Vérifier la version de Ruby

SASS

Avec l’installeur gem de Ruby, on installe SASS.

Sublime Text 3

Avec Package Control, on installe le package Sass. Ctrl+Shift+P et Package Control: Install Package.  Ce package installe la coloration syntaxique. Et le package SublimeOnSaveBuild, pour permettre de générer les css lorsque l’on sauvegarde les scss.

Et l’on crée un fichier de build dans le dossier User/. Ouvrir Preferences > Browse Packages et se rendre dans le dossier User. On crée un fichier SASStoCSS.sublime-build.

Losque l’on appuie sur Ctrl+B dans un fichier SASS, cela crée à la fois le CSS et le CSS compressé. En activant Tools -> Save All on Build, tous les fichiers SASS sont sauvegardés lors du processus.

Si l’on veut un fichier source map, très utile lors du développement, on change sourcemap=inline.

Save on build

Si l’on utilise Sublime SFTP et Sublime On Save Build, on peut à la fois compiler le fichier SCSS en le sauvegardant Ctrl+S et l’uploader sur un seveur. Pour cela, il faut ouvrir également le fichier CSS final, et en faisant Ctrl+Shift+P lorsque le fichier est ouvert, on sélectionne :

Sublime SFTP, upload on extarnal save
Sublime SFTP, upload on external save

On peut taper le raccourci Ctrl+Alt+U, Ctrl+Alt+M. Ayant un conflit avec un programme Windows sur le Ctrl+Alt+M MobaXTerm, je l’ai changé en Ctrl+Alt+U, Ctrl+Alt+O. 

Par défaut, le plugin Sublime On Save Build sauvegarde également les fichiers import commençant par un underscore _. Pour éviter cela, il suffit d’enter des réglages utilisateur pour  Sublime On Save Build, c’est à dire dans le fichier /packages/User/SublimeOnSaveBuild.sublime-settings et ne pas mettre d’autres underscores dans les noms de fichier :

Il suffit de commencer le nom des fichiers importés par un underscore _ et de ne pas mettre d’underscore dans le nom des fichiers globaux. Je n’ai pas trouvé une autre regex, ^[^_].+?\\.(js|sass|less|scss)$ ne fonctionnant pas.

Et hop, on peut générer ses styles dans Sublime Text en utlisant SASS.

Soumettre un commentaire

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

Ce site utilise Akismet pour réduire les indésirables.