Why Sass?


Sass-CSS-glasses-screenshot

CSS Preprocessors

When I first started reading about CSS pre-processors like Sass and Less, I have to admit I was a little skeptical. They seemed like a short hand and a language of convenience that came at the cost of learning yet another language. It wasn’t until really digging into its features that I realized how much I had been missing.

Why I chose Sass

My first challenge was to pick an environment. I chose Sass (technically SCSS – which is a stricter version of the language.), I am not totally sure what sold me on it but it seemed like a good fit for me. While researching, I found a Level-Up Tuts video series that helped me a lot. It’s a really rich video tour that guides you through setting up a robust development environment using CodeKit, Compass and Sass. I included a link to the video series at the end of the article.

The Best Features (a few anyways.)

Variables

The ability to use variables is hands down the most obvious and lacking feature of CSS. With Sass, your dream of a grown-up style sheet becomes a reality. This for example:


$font-fam-1: sans-serif;
    
body {
    font-family: $font-fam-1;
}

Compiles to this:

/* CSS */
body {
  font-family: sans-serif; 
}

While this may seem like a lot of extra code for no real gain, consider something like a border radius. Say you want to have 3 sizes and they apply to many different containers. With Sass this super simple to deal with.


$border-rad-lg: 12px;
$border-rad-med: 6px;
$border-rad-sm: 2px;
    
div.lg-radius {
    border-radius: $border-rad-lg;
}
    
input.button-with-radius {
    border-radius: $border-rad-med;
}

Now if the whole world suddenly says “Round corners are out!,” you have exactly 3 variables to change no matter how many containers you applied it to.

Nesting

Trying to keep a stylesheet organized is always a battle. Consider that your html follows a nested pattern but your CSS does not. You can chain selectors but that does not really organize the code. Look at the following:

<!DOCTYPE html>

<html>
<head>
    <title>Sass-Demo</title>
</head>
<body>
 <div id="wrapper">

    Red Text in the wrapper.
    <div class="inner">
        Green Text in the "inner" div.

        <p>Blue Text in the "p" tag</p>

    </div>
 </div>
</body>
</html>

With standard CSS you would code this as follows:

#wrapper {
    color: red;
}

#wrapper .inner { 
    color: green;
}

#wrapper .inner p {
    color: blue;
}

This is fine in a simple document, but as you add more properties the selectors can become much more abstract and hard to follow. If you use Sass, you can nest your selectors like this:

#wrapper {
    color: red;
    .inner {
        color: green;
        p {
           color: blue 
        }
    }
}

With your selectors nested, your CSS hierarchy begins to match your html and will really help you stay organized.

Nested Media Queries

As many of us know, keeping track of selectors inside of several media queries can be a challenge. With Sass nesting, you can place the media query for each element inside the selector, rather than 1000 lines below in a media query. I promise this alone is worth it! So in order to add a break point, just do the following:


#wrapper {
    background-color:red;
    
    @media screen and (min-width: 600px) {
        background-color: blue;
    }
}

It’s so simple, especially considering you can create variables for your break points. With this pattern, all of the CSS states of the element are contained within one CSS selector, rather than spread out in the stylesheet.

Mixins

There are many great tutorials available so I won’t go too crazy here, but the last point I want to cover is the mixin. A mixin (Compass provides many of them) is a reusable pattern that you can access form inside of a selector. For example, css3 properties often have prefixed properties to contend with. Instead of writing those over and over again, just create a mixin. Let’s look at something semi-complex like a css3 transition:


/* First a mixin is created */
@mixin transition($property, $duration, $type) { 
    -webkit-transition: $property $duration $type;
    -moz-transition: $property $duration $type;
    -ms-transition: $property $duration $type;
    -o-transition: $property $duration $type;
    transition: $property $duration $type;
}

/* Then it is called with a very simple syntax*/
#wrapper {    
    background-color:red;
    @include transition(background-color, 1s, ease);
    
    @media screen and (min-width: 600px) {
        background-color: blue;
    }
}

The mixin is an object/pattern that we can now dynamically re-use by including the mixin and setting values for the variables. Sass will compile the pattern, and add the necessary code to support the transition you applied to the pattern.

I am fairly new to the technology(s) but I think it’s really exciting and powerful. For the sake of brevity, I didn’t even cover operators, partials, inheritance, compass mixins/support and the many great features built into CodeKit. The topics are endless. If you havan’t tried a preprocessor yet, I hope this helps give you the nudge you need to checkout some of these technologies. If you are already an expert, please shred my elementary explanation in the comments section!

Links


Compass TutorialsA Level Up Tuts Youtube Series.
This video series goes through the basics of setting up a Sass css environment that uses Compass to add better mixins and support, and it explains using CodeKit to help with validating and compiling. CodeKit is $29 (with a 10 day, no strings attached free trial) and worth the price for the pure fact that you avoid working in the command line. The applications docs and support are great start with the videos and you’ll be up and running in no time.

CodeKit – A fantastic and affordable development tool for html/css/JavaScript and beyond.

Sass – (Syntactically Awesome Stylesheets) as explained in their documentation: “Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.”

Less – I haven’t spent any time with Less, but if you want to read a great breakdown of the technology, check out Chris Coyier’s article at CSS Tricks. If you haven’t already, bookmark his site!

Compass extends Sass and provides an extensive amount of mixins and reusable patterns. Work smarter not harder really applies here, spend the time to learn these tools.


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin