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 utilise Sublime SFTP et Sublime On Save Build, on peut à la fois compiler le fichier CSS 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.
Et hop, on peut générer ses styles dans Sublime Text en utlisant SASS.
