New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

Article Center

By Ray Villalobos | Monday, August 27, 2012

CSS pre-processors part two: Mixins and nesting

In my last article, An Introduction to LESS and Sass pre-processed CSS languages, 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 are two other features in Sass and LESS that will save you even more time: nesting and mixins.

Sass versus LESS

Pre-processors allow you to code in a language that’s similar to CSS, but with additional features. Most people are on the fence about adding them to their repertoire because there are 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, so ultimately it’s learning about the concepts that matters. 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 develop further, they will each keep up with the other.

Pick one

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 it’s a good idea to go with LESS because Boostrap was written with LESS. If you want a nearly identical framework that uses Sass, check out Foundation. Although Sass requires you to install Ruby, you’ll want to use something like CodeKit to manage your pre-processors.

My advice: Pick one framework and get good with it.

Before we start coding, keep in mind that when I’m talking about Sass, I’m speaking of the newer version with an .scss extension. It’s easier to learn for CSS users because it lets you use CSS syntax and style you may already know.

Nesting

Besides variables, another 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>

Here’s a typical way to write CSS to make this into a nav bar:

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 nav bar written with CSS

A simple nav bar written with CSS

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, like 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></li> selector is written inside the <ul></ul> selector and the a selector is inside the <li></li> selector as if they were another rule. Notice that because we are using a pseudo-class, I have to add the ampersand (&) before the :hover selector.

Nesting doesn’t necessarily save you a ton of time, but it makes your code cleaner. When coding CSS, designers can sometimes add new rules where they don’t belong: nesting helps you keep everything tidy.

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 liked 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);
}

To make sure the gradient displays in as many older browsers as possible, we have to include code for different versions of Safari, Google Chrome, Firefox and Opera. It almost makes you want to stop 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;
.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);
}

Modifying the gradients to use variables works great and it will save you a lot of time. But what if you wanted to reuse this for other declarations? 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 as a base.

$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 makes working with gradients more manageable, 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 like writing a function. Here’s the syntax in Sass.

@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 type the following:

.mybox {
   @include lgradient;
}

Adding this line of code 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 an easier way to create gradients. 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. You can see how pre-processors will help you write CSS more efficiently. If you haven’t already taken the plunge, what are you waiting for?

Interested in more?

Suggested courses to watch next:

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

All articles

Featured articles

Article categories

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.