From SASS to CSS

SASS is a very powerful tool. I believe it's a "must have" for all projects that require more than a couple of basic selectors. It will change the way you think about CSS and more importantly, will change the way you organize and reuse your CSS.

If you don't know exactly what SASS is all about, please go ahead and read my previous article before continuing: The Power of SASS

In that article I briefly mention the fact that browsers know nothing about SASS. Browsers can only read styles in the form of CSS. This basically means that in order to send valid CSS, we need to convert our SASS files into CSS, often referred as "compilation".

Here I'll present how I've been using it in different projects.
 

Compile often instead of later

Probably the best way of compiling SASS is upon file save. This means that, each time you save one *.sass or *.scss file, a watcher process generates the corresponding *.css file for you. One of the main reasons for this is to avoid that the compilation process gets in the way of the normal flow of developing and testing CSS. If, each time you save a SASS file, the corresponding CSS file is generated, then there's no waiting time or tedious manual process that needs to be done.

Keep this is mind because it's fundamental for a smooth and consensual team adoption.
 

Tools to compile your SASS

There are multiple ways of compiling your SASS files. Here's a short list with the ones I've used.
 

With Visual Studio

If you're using Visual Studio, you can get the Web Essentials add-in that, among other things, will compile your SASS files.

Sublime Text or TextMate

If you're a pure front-end guy, you probably don't mess around with fancy IDEs, and you prefer bare bones text editors like Sublime Text or TextMate. In this case, you can still use add-ins like Package Control's SCSS package.

Using Grunt

Grunt is a JavaScript Task Runner, something comparable with what MAVEN is for Java. If you're using Grunt to package your application, you can add the SASS files compilation to your build process. Even more, with Grunt you can set up file watches (by extension for instance) that can trigger the SASS compilation at each file save. Here's a configuration example:

module.exports = function(grunt) {
                        grunt.initConfig({
                          pkg: grunt.file.readJSON('package.json'),
                          sass: {
                            dist: {
                              files: {
                                'css/app.css' : 'sass/app.scss'
                              }
                            }
                          },
                          watch: {
                            css: {
                              files: '**/*.scss',
                              tasks: ['sass']
                            }
                          }
                        });
                        grunt.loadNpmTasks('grunt-contrib-sass');
                        grunt.loadNpmTasks('grunt-contrib-watch');
                        grunt.registerTask('default',['watch']);
                      }
                      

Select all Open in new window

Gulp

If you prefer Gulp, it supports the same functionality  described above for Grunt. 

MAVEN

I've mentioned MAVEN above, and of course, we can also use it to compile our SCSS. Learning Objects' plug-in is one among many that do the job. However, I have to warn you that this might not be the best solution, at least not alone. As mentioned at the beginning, it's important that the compilation process not get in the way of the development. Having to manually run a "maven package" kind of command each time you need to generate your CSS files will soon become annoying. I advise to keep the MAVEN configuration but have a more "online" compilation method, like the ones above.
 

Do your mock-ups online

Sometimes you don't need to setup a project; you just need to do a proof-of-concept. For those cases, you have a good set of online editors that will help you achieve just that:

• http://sassmeister.com/
• http://jsfiddle.net/
  
  • Set SCSS as your CSS engine in the configurations
• http://plnkr.co/
  
  • Rename your *.css files to *.scss. An *.css file with the same name will be generated "behind the scenes"

Bottom line

Don't be scared to try it; at the end it's only CSS with a bunch of very handy add-ons to the syntax. It's also very well supported by the community so you're sure to find a good way to include it in your development process.

Have fun!