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.