Start using SASS / SCSS with Compass and Sublime

Here are some simple instructions to get you up and running with Compass and SASS/SCSS

First, download and install the ruby interpreter. Ruby is a programming language which the Compass application is written in. If you are on windows, the following is your easiest option:
http://rubyinstaller.org/downloads/

From the download options select
select Ruby 2.0.0-p247

during the installation process, check all the check boxes. particularly the one about adding ruby to the path variable.

Next, we will install compass:

Open up a command prompt (start, run,"cmd").
At the command prompt, type the following command to install compass:

gem install compass

Now, in the command window, navigate to the directory of your web project (the directory that has your CSS directory in it)

At the command prompt, type the following command to create a compass project template:
compass create TestProject

where "TestProject" is the name of the project you want to create.

Additional details on installing Compass can be found at:
http://compass-style.org/install/

Compass will generate a template project named "TestProject".

Open the file named config.rb in a text editor.

You can change the names of the directories in the config file to represent your environment (such as changing the name of the "stylesheets" directory to "CSS" or whatever.)

Now create a file in the same directory as your config.rb file named compassWatch.bat

in the batch file add the line

compass watch .

Notice the "." which indicate the "current" directory.

Save the file. Now, run the batch file (double click to open file).
The command in the batch file will tell compass to continually watch the compass project in the current directory and automatically recompile any SASS/SCSS files that are edited and saved into CSS files.


You are now ready to create sass files!

Bonus pro tip:
Download Sublime Text 2 text editor from
http://www.sublimetext.com/2

After installing sublime, download the SASS plugin for sublime:

https://github.com/n00ge/sublime-text-haml-sass/archive/master.zip

Unzip the contents of the zip file.
Copy the "Ruby Haml" and "SASS" directories and paste them into your sublime plugins directory (likely):

C:\Users\Matthew Evans\AppData\Roaming\Sublime Text 2\Packages

Now, open Sublime open a SCSS file (or create a new file with the .scss extension and save it in your TestProject\sass\ directory)

If sublime does not auto-detect that you are working with a scss file you can force it to use proper syntax:

Press ctrl+shift+p and type "sass" into the filter box and select SASS Syntax.
Note that you can do this for other types of files. Very handy.

Make your edits to your scss file and save the file.
Because you have the batch file running in the background, compass will detect the changes to the scss file and auto-compile it into a CSS file.

Now you are REALLY ready to create sass/scss files!

You can learn more about SASS/SCSS at
http://sass-lang.com/tutorial.html

and

http://thesassway.com/

Enjoy.