Compiling Sass
After learning how to write Sass files, you’re going to understand how we compile these files into a single CSS file. If you didn’t read the posts that teach how to code on Sass, you can go there write now, just by clicking on the following links:
Ok, now we can start. We have to ways of compiling our Sass files, with the Sass compiler and with the Compass. First let’s see how we use the Sass compiler.
The Sass Compiler is a RubyGem, so you need to install Ruby if you’re using Windows, I posted how to do it, just click on the following post if you didn’t read that one too: Installing Ruby on Windows.
After installing it, go to your command prompt and use the following command:
gem install sass
This will install the gem you need, and it is ready to use, to compile a file Sass, go to the directory of the file and use this:
sass [name of the file]
If you want to give a path to the output CSS file, stay at the directory of the Sass file, and use this command:
sass [name of the file]:[path and name of the CSS file]
A good tool is the “–watch”, that will see every change on the Sass file and compile automatically to the CSS file, you can use the two types of command with “–watch”:
WITHOUT PATH:
sass --watch [name of the file]
WITH PATH:
sass --watch [name of the file]:[path and name of the CSS file]
This is how we compile Sass into CSS using the Sass compiler, now, let’s use Compass to do it, first you need to install it:
gem install compass
A good thing in Compass is that you can create a file called “config.rb” with all the configuration you want, the example below is the file I use to this website:
preferred_syntax = :sass
http_path = '/'
css_dir = 'assets/css'
sass_dir = 'assets/sass'
images_dir = 'assets/img'
relative_assets = true
line_comments = true
You can notice that automatically Compass will know where is everything: CSS, Sass and Images directory. So using tha following command:
compass watch
You will compile the Sass file into the CSS file, and every change on Sass file will be compiled. Remember that you need to be on the directory of the “config.rb”(that should be on your project directory) to use this command.
So, these are the two ways to compile Sass into CSS. You can find me on Facebook and Twitter, if you have any doubts with the compiling, contact me :)