Follow these installation instructions to start using SASS with Sublime Text. You’ll be able to save your SASS (.scss) file, and it will compile to a CSS file automatically. There are a few more extensive guides out there on this, but they skipped over a few minor things that you may miss. This boils it down to the essentials that you need to get up and running.
How to Build .scss with Sublime Text:
- Install Ruby: Download Ruby for Windows. When you run the installer, choose the option Executable in PATH
- Install SASS with Ruby: Open your Start menu and type “cmd” to open a command prompt. Type “gem install sass” and press enter. Gem will do its thing and install.
- Install Package Manager for Sublime Text: You may already have this installed if you’ve been installing other extensions. Follow the installation instructions on the plugin’s website.
- Use Package Manager to Install “SASS”: This package is for syntax highlighting. Open the command panel with Ctrl+Shift+P and run “Package Control: Install Package”, then type SASS to find the package to install and press Enter.
- There probably is a conflict where the syntax highlighter thinks your files are HAML. Rather than modifying your Ruby highlighting settings as some articles show, you can do this when you have an .scss/.sass file open:
View -> Syntax -> Open all with current extension as … | Sass
- There probably is a conflict where the syntax highlighter thinks your files are HAML. Rather than modifying your Ruby highlighting settings as some articles show, you can do this when you have an .scss/.sass file open:
- Use Package Manager to Install “SASS Build”: This will allow your SASS/SCSS files to be compiled.
- (Optional) Use Package Manager to Install “SublimeOnSaveBuild”: Use this if you want to compile whenever you save, rather than using the separate keyboard shortcut for build (Ctrl+B).
- Restart Sublime Text
- Save your .scss file, and voila, the corresponding .css file of the same name will appear in the directory.
Helpful Hints:
- Don’t want the CSS file to save in the same directory? If you want to change the default folder that your generated CSS files are saved to, you can edit the configuration for what Sublime Text calls “Build Systems”. This configuration is what’s calling the commandline for SASS. Unfortunately there doesn’t appear to be a way to do this on a per-project basis, but you can change it.Example I used for WordPress: Having style.scss in the folder /sass/ inside your theme folder, this would save style.css in the root.
"cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css"], - You probably don’t want your SASS partials to be compiled, if you’re using the SublimeOnSaveBuild. I’ve wrote another blog about adding a regex to stop this.
Package Links:
![CSS Secrets [Book Cover]](/wp-content/uploads/2020/03/css_secrets_book_cover.jpg)
![Eloquent JavaScript [Book Cover]](/wp-content/uploads/2020/03/eloquent_javascript_book_cover_b.jpg)
![The Phoenix Project [Book Cover]](/wp-content/uploads/2020/03/phoenix_project_book_cover.jpg)
So easy to follow, even though this is my first foray into SASS and Sublime Text. Thanks.
Thanks a lot!! Really clear 🙂 The only problem I encountered was the ‘”sass” is not recognized message’, which I solved following this tut: http://www.webdesignerdepot.com/2012/11/how-to-get-started-with-sass/ (in case anyone needs to solve the same issue)
I’ve been having trouble trying to change the compile directory for where to put the .css files after the build. I’ve seen mention in many places to edit some mythical file to change the location, but nowhere have I found reference of where exactly this file is or what it is called. Anyone know where I am supposed to put that “cmd”…. snippet?
This may be what you’re looking for: http://docs.sublimetext.info/en/latest/reference/build_systems/basics.html
I’ve stopped using Sublime for the SASS compiling lately. Now I just run compass.app in conjunction with Sublime Text, and use its
config.rbfor changing the compile directories, etc.Josh,
Thanks for the clarity. Can you explain why you have moved to Compass. I am interested in quick browser preview of changes and this appears to introduce additional steps.
I believe it was because of other annoyances w/ the Sublime Text extensions that caused more steps. After fixing the ignoring partials issue with a regex, the main SCSS would not compile unless you switched back to that file and saved it. There was something else too. Compass is easier because I just watch the folder/project I’m working on, and it automatically compiles correctly when it detects changes after I save in Sublime Text.
Hi,
Thanks for this awesome tutorial. I followed through successfully until i got to “Using package manager to install sass build”. For some reason i cant find sass build when i use package manager. I have looked through many articles and there seems to be more support for ST2 i am using ST3. Is there no way round it in S3 or should i just go back to ST2? Please help! Thanks again
I just checked and I see “SASS Build” with Sublime Text 3 (build 3083) in the package install list. I’m not sure why you wouldn’t be seeing it.
As mentioned in some of the above comments, I don’t use it anymore. I’m mostly using Compass.app or Gulp (gulp watch) depending on the project.