Getting Started with CSS pre-processors (SASS and Less) Part 2: Nesting and Mixins

In my last article, I wrote about using variables with CSS pre-processors. Having the ability to use variables will save you enough time to justify learning pre-processors, but there’s a lot more . In this article I want to talk about two other main features available in SASS and Less that will save you even more time: Nesting and Mixins.

SASS vs Less

Pre-processors allow you to code in a language that is similar to CSS, but with additional features. Most people are on the fence about adding them to their repretoire because there’s two competing high profile standards: Less and SASS.

I remember having a similar problem a few years ago trying to decide between jQuery mobile and other JavaScript libraries. SASS and Less are so similar that it almost doesn’t really matter which one you learn. Switching in between them is pretty easy…because they’re pretty similar. Yes there are some features specific to each language like guarded mixins in Less and conditionals in SASS, but I imagine that as the languages evolve they will each keep up with the other.

Pick one

To me, the important thing is what you plan to do with the languages. If you’re planning to use a framework like BootStrap from Twitter, then since Less was written with BootStrap, it might be a good idea to go with that. If you want a pretty identical framework for SASS, check out Foundation. Although SASS requires you install Ruby, if you’re going to be using something like CodeKit to manage your pre-processors, then Ruby won’t matter.

My advice, just pick a framework and get good with it.

Before we get started, I wanted to let you know that when I’m talking about SASS, I’m speaking of the newer version of SASS with an .scss extension. It’s easier to learn for CSS users because it let’s you use css syntax and style you already know.

Nesting

Other than variables, the next awesome thing you can do with pre-processors is nesting. Let’s say you’ve developed a simple horizontal nav bar for your site.

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Info</a></li>
</ul>

A typical way to write CSS to make this into a nav bar is like this:

ul {
    margin: 0;
    padding: 0;
    font: bold 1em/1.2em Helvetica, Arial;
}

ul li {     
    list-style: none;
}

ul li a {
    float: left;
    background: #BA0436;
    text-decoration: none;
    color: white;
    display: block;
    padding: 10px;
}

ul li a:hover {
    background: #EEC25C;
    color: black;
}

A simple CSS navbar

As your CSS file gets bigger, the number of styles that are children of other styles increases. In either SASS or Less, you can do the same thing with this.

ul {
    margin: 0;
    padding: 0;
    font: bold 1em/1.2em Helvetica, Arial;
    li {
        list-style: none;
        a {
            float: left;
            background: #BA0436;
            text-decoration: none;
            color: white;
            display: block;
            padding: 10px;

            &:hover {
                background: #EEC25C;
                color: black;
            }
        }
    }
} 

This way, the li selector is written inside the ul selector and the a selector is inside the li selector as if they were another rule. Notice that because we were using a pseudo-class, I added the ampersand (&) before the :hover selector

Nesting doesn’t necessairy save you a ton of time, but it makes the code cleaner. When coding CSS, designers can sometimes add new rules where they don’t belong…nesting can help you organize your code.

Both SASS and Less implement mixins the same way, so there’s no need to show you the difference between the two.

Mixins

If you like variables, you’re going to love mixins. They are snippets of code you can reuse over and over in your CSS. You can use them with variables to make coding in CSS easier. Let’s take a look at how you would code a simple top to bottom gradient using regular CSS.

.mybox {
  background-color: #333745;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DAEDE2), to(#77C4D3));
  background-image: -webkit-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image:    -moz-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image:      -o-linear-gradient(top, #DAEDE2, #77C4D3);
  background-image:         linear-gradient(to bottom, #DAEDE2, #77C4D3);
}

In order to make sure the gradient displays in as many older browsers as possible, we have to include code for different versions of Safari, Chrome, Firefox and Opera. It almost makes you stay want to walk away from doing gradients in your CSS. We can use variables to simplify this. Let’s try that with a SASS example.

First, we’ll create two variables for the colors somewhere in our scss file:

$from: #333745;
$to: #77C4D3;

Once we have that, we can modify our gradient to use the variables:

$from: #333745;
$to: #77C4D3;

.mybox {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image:    -moz-linear-gradient(top, $from, $to);
  background-image:      -o-linear-gradient(top, $from, $to);
  background-image:         linear-gradient(to bottom, $from, $to);
}

That works great and it will save you a lot of time, but what if you wanted to reuse this for other elements. That’s where mixins come in. You can create snippets of code and reuse them. Let’s create a mixin for linear gradients using the code above.

$from: #333745;
$to: #77C4D3;

@mixin lgradient {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image:    -moz-linear-gradient(top, $from, $to);
  background-image:      -o-linear-gradient(top, $from, $to);
  background-image:         linear-gradient(to bottom, $from, $to);
}

This is fine, but it will only work with one set of from/to colors. We can easily improve on this by putting these variables within our mixin. If you know JavaScript, this is exactly like writing a function. Here’s the syntax.

@mixin lgradient($from: #333745, $to: #77C4D3) {
    background-color: $from;
    background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background-image: -webkit-linear-gradient(top, $from, $to); 
    background-image:    -moz-linear-gradient(top, $from, $to); 
    background-image:      -o-linear-gradient(top, $from, $to); 
    background-image:         linear-gradient(to bottom, $from, $to);
}

Now, when we want to use our gradient in our box, we can just do this:

.mybox {
    @include lgradient;
}

That will create the gradient with the default colors, but since they’re variables, you can create any top to bottom linear gradient and specify the colors in your SCSS file.

.mybox {
    @include lgradient(#FCC,#FEE);
}

Now you have a way to create gradients that is much easier. Let’s check out the code in Less:

.lgradient(@from, @to) {
    background-color: @from;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
    background-image: -webkit-linear-gradient(top, @from, @to);
    background-image: -moz-linear-gradient(top, @from, @to);
    background-image: -o-linear-gradient(top, @from, @to);
    background-image: linear-gradient(to bottom, @from, @to);
}

.mybox {
 .lgradient(#CCC,#DDD); 
}

Pretty similar, except that the dollar signs ($) are replaced by @ symbols and there is no mixin keyword.

Leave a Reply