<

Go Premium for a chance to win a PS4. Enter to Win

x

From SASS to CSS

Published on
4,318 Points
1,218 Views
1 Endorsement
Last Modified:
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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']);
}

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:


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!

 
1
Comment
0 Comments

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Join & Write a Comment

This video teaches users how to migrate an existing Wordpress website to a new domain.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month