skip to main content

What is Sass?

Syntactically awesome stylesheets

Sass NOT SASS

Typing "SASS" is like typing "JAVA" or "RUBY" or "REACT". It's not supposed to be capitalised.

You can capitalise SCSS, but "Sass" is the name of the language and not only an abbreviation (in fact, the "Syntactically awesome stylesheets" bit came after-the-fact).

Most importantly, it's CSS compatible, feature rich, mature, and industry approved. There is a large community and there are a great many number of frameworks built with Sass.

Installing Sass

There are a couple of ways to start using Sass:

Applications

There are plenty of applications that will get you up and running with Sass in just a few minutes. Some of them are paid, but you should be able to find a free one that works for you.

Command Line

Linux - If you're using a distribution of Linux, you'll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.

sudo su -c "gem install sass"

Windows - Before you start using Sass you will need to install Ruby. The quickest and fastest way is to use the Ruby Installer for Windows. This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important documentation, and more.

Mac - You're in good luck. Mac OS comes preinstalled with Ruby. Whoop!

Install Sass

Using Terminal.app on the Mac or on Windows running `cmd` is the quickest way to get started.

Installing Sass - Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type:

gem install sass

This will install Sass and any dependencies for you. You may run into a permissions error or something similar. If you do, don't panic and just run the command again, this time with `sudo` at the beginning.

To double check you'veinstalled it correctly type `sass -v` into your teminal and it should return `Sass 3.4.22 (Selective Steve)`. If so, congrats! You've just installed Sass.

Syntax

Since the introduction of Sass V3, almost 5 years ago. There's been an alternative syntax for Sass in existance called SCSS.

Sass

The indented syntax of Sass was inherited from its first-born brother Haml. And while Sass and Haml once got along dissension in the family caused the two languages to split and go their separate ways. Each seeking its own fame and fortune in the land of Open Source opportunity.

One common objection among Sass detractors is that the indented syntax is so foreign to CSS. Why spend the time learning a language that is radically different from CSS? This difference, they feared, would make it hard for them to continue to remain fluent in a language with as many nuances and subtleties as CSS. What if Sass was just a fad? What if it didn't last? What if it didn't gain traction among the masses? Blah, blah, blah… You get the point.

This is where SCSS came about.

SCSS to the rescue!

So since version 3 SCSS has been the main syntax style for Sass and as such that's what we'll use in the follwing demos. Feel free to look up and even use the older syntax. Heck, I even use it to this day. More information on Sass vs SCSS agument can be found here. Make your own mind up.

Preprocessing

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your web site. As we've already discussed you can use a GUI if you'd like, but the most direct way to make this happen is in your terminal.

Sass provides us with the `--watch` flag which will then allow us to set it running in the background and save out any changes to a directory of our choosing, just like the example below.

sass --watch src/stylesheets:build/stylesheets

Variables

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the `$` symbol to make something a variable. Here's an example:

See the Pen Sass 101 - Variables by Jonny Haynes (@jonnyhaynes) on CodePen.

When the Sass is processed, it takes the variables we define for the `$font-stack` and `$primary-color` and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

Nesting

When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

With that in mind, here's an example of some typical styles for a site's navigation:

See the Pen Sass 101 - Nesting by Jonny Haynes (@jonnyhaynes) on CodePen.

Can you see that the `ul`, `li`, and `a` selectors are nested inside the `nav` selector? This is a great way to organise your CSS and make it more readable.

Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like `_partial.scss`. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the `@import` directive.

Import

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use `@import` in CSS it creates another HTTP request. Sass builds on top of the current CSS `@import` but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

Let's say you have a couple of Sass files, `_reset.scss` and `base.scss`. We want to import `_reset.scss` into `base.scss`.

// _reset.scss

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
    
// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
    

Notice we're using `@import 'reset';` in the `base.scss` file. When you import a file you don't need to include the file extension `.scss`. Sass is smart and will figure it out for you. When you generate the CSS you'll get:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
    

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 an example for `border-radius`.

See the Pen Sass 101 - Mixins by Jonny Haynes (@jonnyhaynes) on CodePen.

To create a mixin you use the `@mixin` directive and give it a name. We've named our mixin `border-radius`. We're also using the variable `$radius` inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin.

Extend/Inheritance

This has been described by the Official Sass language website as "one of the most useful features of Sass". However I think that with the wide adoption of the BEM methodology it's somewhat fallen by the wayside.

Using `@extend` lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.

See the Pen Sass 101 - Extend by Jonny Haynes (@jonnyhaynes) on CodePen.

What the above code does is allow you to take the CSS properties in .message and apply them to `.success`, `.error`, & `.warning`. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
  font-family: Helvetica, sans-serif;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}    
    

Further reading

Operators

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.

Not sure if these are required any more with the wide adoption of CSS `calc()`;

See the Pen Sass 101 - CSS calc() by Jonny Haynes (@jonnyhaynes) on CodePen.

Functions

A function is very similar to a mixin, however the output from a function is a single value. This can be any Sass data type, including: numbers, strings, colors, booleans, or lists.

The following function can accept 2 arguements, `$some-number` and `$another-number`. The value returned are those two variables added together.

@function my-calculation-function($some-number, $another-number){
  @return $some-number + $another-number
}
    

And this how we'd use it:

.my-module {
  padding: my-calculation-function(10px, 5px);
}
    

And here is the output CSS code.

.my-module {
  padding: 15px;
}
    

As you can see, functions help you write more readable and DRY Sass by letting you move your reusable logic out of specific declarations and even out of your mixins. This can make all the difference in the world when you're working on something that's even a little bit complex.

Maps

If you ever needed to write out a bunch of classes for future use, eg:

// Foreground colours
.color-red { color: red; )
.color-blue { color: blue; )
.color-green { color: green; )

// Background colours
.bg-color-red { background-color: red; ) 
.bg-color-blue { background-color: blue; )
.bg-color-green { background-color: green; )
    

If this list was quite extensive, say 15 items it would take us a while to write out and and would be counter productive as we might as well use the power of Sass to write it out for us.

The maps work as key value pairs in this format:

$map: (key1: value1, key2: value2, key3: value3);
    

So for our colours lets start by writing out the map:

$colors: (
  red: red,
  blue: blue,
  green: green
);
    

We could then iterate over the map with the Sass Each Directive like so:

@each $color, $theColor in $colors {
  .color-#{$color} {
    color: $theColor;
  }
  .bg-color-#{$color} {
    background: { color: $theColor; }
  }
}
    

That would give us the output we need, quickly and easily. If we needed to change a colour, we'd only have to change it in one place.

So we've got easy to maintain code, which is fast to reference.

If for some reason, you'd just need to reference the one colour somewhere else. you can do that like so:

.other-blue-class {
  background-color: map-get($colors, blue);
}