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
|
1 2 3 |
C:\Users\xavier_bs\Desktop λ ruby -v ruby 2.5.5p157 (2019-03-15 revision 67260) [x64-mingw32] |
SASS
Avec l’installeur gem de Ruby, on installe SASS.
|
1 2 |
C:\Users\xavier_bs\Desktop λ gem install 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
{ "cmd": [ "sass", "--update", "--stop-on-error", "--no-cache", "--style", "compressed", "--sourcemap=none", "--load-path", "${file_path}", "$file:${file_path}/../css/${file_base_name}.min.css", "&", "sass", "--update", "--stop-on-error", "--no-cache", "--sourcemap=none", "--load-path", "${file_path}", "$file:${file_path}/../css/${file_base_name}.css" ], "selector": "source.sass, source.scss", "line_regex": "Line ([0-9]+):", "osx": { "path": "/usr/local/bin:$PATH" }, "windows": { "shell": "true" } } |
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 :
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 :
|
1 2 3 |
{ "filename_filter": "^[^_]+\\.(js|sass|less|scss)$", } |
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.
