Question

I have packages SASS and SCSS installed. SCSS provides the syntax highlight while SASS provides the build system i need for scss. My problem is, if build is set to automatic, it wont build the scss files if i press ctrl+b, so i have to always go back and reselect that option. Is there a way to make that build system to be the automatic one for scss?

Answer 1

Set it up using a build system and fire off with F7:
http://readthedocs.org/docs/sublime-text-unofficial-documentation/en/latest/file_processing/build_systems.html?highlight=build for more information about setting that up.

UPDATED ANSWER

Copy the following:

{
  "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
  "selector": "source.sass, source.scss",
  "line_regex": "Line ([0-9]+):",
  "osx":
  {
    "path": "/usr/local/bin:$PATH"
  },

  "windows":
  {
    "shell": "true"
  }

}

In Sublime Text, go Tools > Build System > New Build System > Paste
Give it a name. Bingo.

Simpler Way

SASS Support in Sublime

Adding Support for near everything.

Simplest Way

Why DIY when you do not need to.

Want to have the site update in an open browser every time you save?

1. Generally a good must to have Ruby Git and Python installed.

2. Install Nodejs.
   (win) the .msi download from main site works well and includes npm
   Now you have access to the ‘gem’ and ‘npm’ package managers.
   Things get easy now, although I may as well write it out longwinded.

3. Compass:

   gem update –system
   gem install compass
   // can now use this command to build a sass-based project
   compass create myFirstWebsite
   // ..installs in “/myFirstWebsite”..

4. Install the Grunt client (global flag)

   npm install grunt-cli -g

now have access to the wealth of Grunt automation packages ie:

npm grunt-contrib-jshint --save-dev

“dev” flagged – applies to your local project only (current and sub folders)
also, listed as a “devDependency” in package.json, which means it’ll not be
packed with your project on a distro/prod build

1. Time for some simple awesome… Yeoman

   npm install yo -g

installs yeoman (yo commands) a heap of other essentials
and Bower – twitter’s response to Node / Gem etc
Bower looks after package dependencies.

AND THE AWESOME?

// make a new folder. cd into it, and type:
yo webapp

// There are multiple 'generators' you can install with yo.
// webapp is the one most suitable for front-end dev / web app building

// other things you might want before you start.. maybe underscore:
bower install underscore
// adds '_' to the set-up as a dependency

// These commands will brighten your day:
grunt test      
// comprehensive testing of app
grunt server    
// This part you'll love! Starts server and launches app in browser
// - includes live-refreshing... save a file, and all required builds etc
// are preformed (damn fast) and automatically refreshes browser.
// Yup, 'grunt server' = project-wide equiv to 'compass watch'
grunt
// Build application for deploy. Not only do you get minification and concatenation;
// also optimize all your image files, HTML, compile your CoffeeScript and Compass files, 
// if you're using AMD, will pass those modules through r.js so you don't have to.