Sass: The Syntactically Awesome Style Sheet

Mikkel SandbergFull Stack Developer
Web developer and designer skilled at creating beautiful web applications.
Published:
Updated:
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.

Introduction

Using HTML and CSS to create a web page works well, but it lacks versatility that Sass offers. I’m not a Sass expert, but I have used it on a couple of projects and it’s pretty great. If you want to know more about Sass, how to install it and all that jazz, then check out the documentation site here.

There are two main ways to write Sass code: SCSS (Sassy CSS) and Sass. SCSS looks more like normal CSS because it uses curly braces and semicolons. However, Sass relies on whitespace to differentiate sections. For example, in SCSS you may write:
 
.caption {
                        @include master-text
                        font: {
                          style: italic;
                          size: 0.75em;
                        }
                        color: gray;
                      }

Open in new window


while in Sass you would write:
 
.caption
                        +master-text
                        font:
                          style: italic
                          size: 0.75em
                        color: gray

Open in new window


In both cases, it compiles to the same CSS so it is really just a personal preference of how you would like to code. Don’t worry if you don’t understand what some of the above code means; by the end of this, you’ll have a better idea of how Sass works. Some of the main features I’ve found to be useful are variables, mixins and nesting. 
 

Koala

A tool that I have found useful to use with Sass is Koala. Koala is a gui application for Mac, Windows and Linux that will compile your Sass code into CSS. It can be configured to listen to your project folders and automatically compile any time you save your files. Koala also does error checking, so it’ll catch all your syntax mistakes as you go. The alternative to Koala would be using the command line. This isn’t all that bad, but I’ll take a nice GUI over the command line any day. I don’t Sass without Koala, and neither should you.

As a side note, all examples I provide will be using Sass syntax rather than SCSS syntax. However, I have posted another article here that goes over some more Sass using the SCSS syntax.

And here. We. Go.
 

Variables

No matter what programming language you use, variables are absolutely key. In Sass, variables allow for more flexibility and may make your life easier if you need to use a certain value in many places. For example, it’s useful to define a variable for a certain color that you use throughout your site. You can do that by using this notation to define the variable:
 
$main-color: #af0000

Open in new window

  And then call it again anywhere using this notation:

background-color: $main-color

Open in new window


This compiles to CSS as this:
 
background-color: #af0000;

Open in new window


Pretty cool, no?
 

Mixins

Mixins are essential if you want to adhere to DRY (Don’t Repeat Yourself) principles. On the main site for Sass, here’s what is said about mixins: “Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.” 

Here’s how it works:
 
=body-text
                        font:
                          family: Helvetica, sans-serif
                          weight: 400
                          style: normal
                          size: 1em
                        color: $bodyColor
                        text-align: left

Open in new window

And then to call it in your code, use this:
 
body
                        +body-text
                        text-align: left

Open in new window


Then it compiles to this in CSS:
 
body {
                        font-family: “Helvetica”, sans-serif;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 1em;
                        color: #000000; // or whatever $bodyColor is defined as
                        text-align: left;
                      }

Open in new window


These allow a great deal of flexibility, because they allow you to easily change properties further down the road. Let’s say that you decide later on that you want a particular text style to be different, even if you’ve used classes as efficiently as possible, you may still have to change a property in multiple places. Whereas if you use mixins, you only have to change that property once and it updates across the whole style sheet.

As a side note, Koala is able to automatically prefix your CSS, so I personally have not needed to use mixins for prefixing. 

I have found mixins particularly helpful for doing broad declarations for text, and then calling that mixin wherever I need that set of text styles. For example, I may do something like this:
 
=masterText
                        font:
                          family: Helvetica, sans-serif
                        color: #000
                        line-height: 2rem
                      
                      h1, h2, h3, h4, h5, h6, p
                        +masterText
                      
                      h1
                        color: red
                        font:
                          size: 2rem
                          weight: 800
                      
                      //h2-p styles below this

Open in new window


This gives you a good amount of control over all your styles, and makes it very easy to make broad strokes to your whole site by changing one value.
 

Nesting

This concept is not too hard to understand, but if done wrong it could really mess things up. It’s main purpose is to help keep your code cleaner by allowing you to only have to scope each layer of your code once. What does this mean exactly? Well, maybe it would be easier to just show you. This is what you would normally have to write in CSS:
 
nav {
                        position: fixed;
                        width: 100%;
                        height: 100px;
                      }
                      nav ul {
                        background-color: #000;
                        float: right;
                      }
                      nav ul li {
                        display: inline;
                        margin: 10px 25px;
                      }
                      nav ul li a:link {
                        color: #fff;
                        -webkit-transition: all 0.25s ease-in-out;
                        transition: all 0.25s ease-in-out;
                      }
                      nav ul li a:visited {
                        color: #fff;
                      }
                      nav ul li a:hover {
                        color: #ff0000;
                      }

Open in new window


That’s a lot of wasted space and repetition! Here’s how it looks in Sass:
 
nav
                        position: fixed
                        width: 100%
                        height: 100px
                        ul
                          background-color: #000
                          float: right
                          li
                            display: inline
                            margin: 10px 25px
                            a
                              &:link
                                color: #fff
                                transition: all 0.25s ease-in-out
                              &:visited
                                color: #fff
                              &:hover
                                color: #ff0000

Open in new window


Looks much cleaner, right? It will compile into the CSS you see above, but it looks much different here. The notation may look a bit confusing, but it’s actually pretty simple. You list the top-level tag and just keep drilling down. The ampersand is used to refer to the parent tag. So in this case, you can use it to easily do pseudo classes.

That’s the basics of Sass, and these are a few of the techniques that I use most often.

Stay Sassy Experts.
4
2,176 Views
Mikkel SandbergFull Stack Developer
Web developer and designer skilled at creating beautiful web applications.

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.