Sass is an extremely easy to learn method of coding CSS that can increase your website production time by as much as 30 to 40 percent (purely unscientific).

Before I demonstrate any code, you must first be aware that no internet browser can read Sass natively. Therefore, you will need a compiling method to convert any Sass into traditional CSS. You have two paths you can take in this regard. Either work within a the Terminal ala command line, or my preferred method, working with an application.

My go-to application is CodeKit (Mac only). It’s relatively cheap ($29) and extremely powerful in helping me create modern and efficient websites. Check out these videos to bring you up to speed with this front-end web developer tool.

Prepros is another great compiler and works on Windows, Mac and Linux.

To recap, browsers don’t read Sass code, you’ll need to convert it to CSS with either command line (Terminal) or application (CodeKit).

In the meantime, for the sake of quickly diving into Sass, you can go ahead and use CodePen right away to learn how to code with Sass. After creating a new “pen” click on the gear icon (in the CSS box) and select “Sass (.scss)” and you’re good to go!

Nesting

Nesting is a great way to cut down on repeating yourself when coding a stylesheet. Here’s an example of the same style coded with CSS and Sass.

CSS Method

.container {
   max-width:960px;
   margin:50px auto;
}

.container a{
   color:red;
}

.container a:hover {
   color:blue;
}

Sass Method

.container {
   max-width:960px;
   margin:50px auto;
   a {
     color:red;
     &:hover {
        color:blue;
     }
   }
}

As you can see, no need to keep retyping “.container” over and over again to select child elements. Cool, right? Now, picture doing this with various sections on your web page. Huge time saver!

Variables

Creating and working with variables in programming is essential and now its power can be utilized with CSS as well, via Sass. By assigning styles to variables you can quickly update things like colors throughout your entire stylesheet just by changing one value.

CSS Method

.container {
   border:1px solid #cc3300;
}

.container a {
   color: #cc3300;
}

As you can see, we’re repeating the same color value of “#cc3300” and that just goes against the DRY rule, Don’t Repeat Yourself.

Sass Method

$orange: #cc3300;

.container {
   border:1px solid $orange;
   a {
      color: $orange;
   }
}

If in the future should you want to change the orange color, simply update the value for the variable, “$orange” for instance replace “#cc3300” with “#ff6836” and it will update the color anywhere you have “$orange” referenced in your stylesheet.

Mixins

I like to think of Mixins as Functions from programming. For instance, instead of having to continuously type out browser prefixes (-webkit-, -moz-, -ms-) for lets say a “border-radius” you can create a simple Mixin.

Setting up a Mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Utilizing the Mixin

Now that you have a Mixin for “border-radius” created, here’s how you initlize it.

.container { 
   @include border-radius(10px); 
}

In short, instead of having to rewrite every browser prefix throughout your code whenever you want to use a border-radius, simply take advantage of a mixin and save time!

Import

It’s not a good idea to use “@import…” to include additional stylesheets in your main stylesheet because whenever a page loads in a browser, it has to send out multiple HTTP requests which adds to the load time of your website.

Sass has a fantastic feature that lets you have the convenience of import, yet without the draw back of additional load times.

Say for instance you have a “main.scss” document and a “reset.scss” document. Instead of converting each of them into “main.css” and “reset.css” you should import or in other words, merge them into one document. Here’s how it’s done with Sass.

At the top of page in main.scss” include the following:

@import 'reset';

And that’s it. Once “main.scss” runs through a compiler such as CodeKit, it will prepend “reset.scss” to the top of “main.scss” and output a merged file called “main.css” that includes both documents.

This is a really quick and easy way to manage multiple stylesheets in your web project.

Wrap Up

I hope this gave you enough confidence to dive deeper into Sass and start building all of your future websites with Sass.

Learn more on the Sass website and check out this very handy list of pre-built Sass mixins.