Learn Sass In 15 Minutes

If you write copious amounts of CSS, a pre-processor can greatly decrease your stress levels and save you a lot of precious time. Using tools such as Sass, Less, Stylus or PostCSS makes large and complicated stylesheets clearer to understand and easier to maintain. Thanks to features like variables, functions and mixins the code becomes more organized, allowing developers to work quicker and make less mistakes.

We've worked with pre-processors before as you may remember from our article about Less. This time we are going to explain Sass and show you some of it's main features.

1. Getting Started

Sass files cannot be interpreted by the browser, so they need compiling to standard CSS before they are ready to hit the web. That's why you need some sort of tool to help you translate .scss files into .css. Here you have a couple of options:

  • The simplest solution is a browser tool for writing and compiling Sass right on the spot - SassMeister.
  • Use a 3rd party desktop app. Both free and paid versions are available. You can go here to find out more.
  • If you are a CLI person like we are, you can install Sass on your computer and compile files manually.

If you decide to go with the command line, you can install Sass in it's original form (written in ruby) or you can try the Node.js port (our choice). There are many other wrappers as well, but since we love Node.js we are going to go with that.

Here is how you can compile .scss files using the node CLI:

node-sass input.scss output.css

Also, here is the time to mention that Sass offers two distinct syntaxes - Sass and SCSS. They both do the same things, just are written in different ways. SCSS is the newer one and is generally considered better, so we are going to go with that. If you want more information on the difference between the two, check out this great article.

2. Variables

Variables in Sass work in a similar fashion to the those in any programming language, including principals such as data types and scope. When defining a variable we store inside it a certain value, which usually is something that will often reoccur in the CSS like a palette color, a font stack or the whole specs for a cool box-shadow.

Below you can see a simple example. Switch between the tabs to see the SCSS code and it's CSS translation.

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}
h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

The idea behind all this is that we can later on reuse the same values more quickly, or if a change is needed, we can provide the new value in just one place (the definition of the variable), instead of applying it manually everywhere we're using that property.

3. Mixins

You can think of mixins as a simplified version of constructor classes in programming languages - you can grab a whole group of CSS declarations and re-use it wherever you want to give and element a specific set of styles.

Mixins can even accept arguments with the option to set default values. In the below example we define a square mixin, and then use it to create squares of varying sizes and colors.

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}
.small-blue-square {
  width: 20px;
  height: 20px;
  background-color: blue; 
}

.big-red-square {
  width: 300px;
  height: 300px;
  background-color: red;
}

Another efficient way to use mixins is when a property requires prefixes to work in all browsers.

@mixin transform-tilt() {
  $tilt: rotate(15deg);

  -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: $tilt; /* IE 9 */
          transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover { 
  @include transform-tilt; 
}
.frame:hover {
  -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: rotate(15deg);  /* IE 9 */
  transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
}

4. Extend

The next feature we will look at is code>@extend, which allows you to inherit the CSS properties of one selector to another. This works similarly to the mixins system, but is preferred when we want to create a logical connection between the elements on a page.

Extending should be used when we need similarly styled elements, which still differ in some detail. For example, let's make two dialog buttons - one for agreeing and one for canceling the dialog.

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}
.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirm {
  background-color: #87bae1;
  float: left; 
}

.cancel {
  background-color: #e4749e;
  float: right; 
}

If you check out the CSS version of the code, you will see that Sass combined the selectors instead of repeating the same declarations over and over, saving us precious memory.

5. Nesting

HTML follows a strict nesting structure whereas in CSS it's usually total chaos. With Sass nesting you can organize your stylesheet in a way that resembles the HTML more closely, thus reducing the chance of CSS conflicts.

For a quick example, lets style a list containing a number of links:

ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }

  }

}
ul {
  list-style: none; 
}

ul li {
  padding: 15px;
  display: inline-block; 
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

Very neat and conflict proof.

6.Operations

With Sass you can do basic mathematical operation right in the stylesheet and it is as simple as applying the appropriate arithmetic symbol.

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}
.container {
  width: 800px; 
}

.column-half {
  width: 400px; 
}

.column-fifth {
  width: 160px; 
}

Although vanilla CSS now also offers this feature in the form of calc(), the Sass alternative is quicker to write, has the modulo % operation, and can be applied to a wider range of data-types (e.g. colors and strings).

7. Functions

Sass offers a long list of built-in functions. They serve all kinds of purposes including string manipulation, color related operations, and some handy math methods such as random() and round().

To exhibit one of the more simple Sass functions, we will create a quick snippet that utilizes darken($color, $amount) to make an on-hover effect.

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}
a {
  padding: 10px 15px;
  background-color: #2196F3; 
}

a:hover {
  background-color: #0c7cd5; 
}

Except the huge list of available functions, there is also the options to define your own. Sass supports flow control as well, so if you want to, you can create quite complex behaviors.

Conclusion

Some of the above features are coming to standard CSS in the future, but they are not quite here yet. In the meantime, pre-processors are a great way improve the CSS writing experience and Sass is a solid option when choosing one.

We only covered the surface here, but there is a lot more to Sass than this. If you want to get more familiar with everything it has to offer, follow these links:

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

Joe Twumasi

Thanks for the wonderful peace of article on sass. Bookmarked it.

AKHIL GUPTA

thanks for this beautiful article on SASS and also makes it so easy for us to understand... thanks for your effort :)

Abraham Kalili

Thank you for a clear and concise write up. Learning JS as well and was pleased to see some crossover in terminology and concepts.

Peter Arthur

In the @extend example, why not use plain CSS without @extend? No styles are missing or repeated, right? To me, it seems more confusing and redundant to have this:

<div class="dialog-button confirm"></div>
<div class="dialog-button cancel"></div>

.dialog-button, .confirm, .cancel {A} / redundant /
.confirm {B}
.cancel {C}

than this:

<div class="dialog-button confirm"></div>
<div class="dialog-button cancel"></div>

.dialog-button {A} / style already applied to both divs /
.confirm {B}
.cancel {C}

Both buttons get the appropriate styling.

Is there another example to illustrate this better? I'm new to Sass, so maybe I just don't understand yet. Thanks for any tips.

Good job, I just learned sass, that was easy :)

Really appreciate articles like this, blocked ad block for your website (and might of clicked on some of them too ;) )

Sivasakthivel

Awesome, really a good article, initially i don't have a basic idea about Sass. but now i got basement of Sass. really thank u for your great effort.

Thanks.

Sathish Kumar

Simple and easy explanation to understand about Sass. Appreciate your effort.

Thanks for posting this!

Thank you very much!

andy brookes

Great concise article
If like me you want to know a little about sass, your probably going to read about first thing figure out how to use it. Also your probably going to want to play with sass & bootstrap. Having with other coders who might have pulled there hair out with all the options though i would mention a bit about set up.

If your on Linux such as Slackware , you will have Ruby installed by default which is good because then you can use gem, which can be used to install software.

$gem install sass

Now with a text editor you can write some of the above article & store the file as main.scss say on your Desktop.
$cd Desktop
To convert it to css you just run
$sass main.scss:main.css

Thats OK with one file but with different install options it all looks like Spagetii with a whole bunch of scss files. I found compass the easiest option & have put a quick install on Twitter here:

https://twitter.com/andybrookestar/status/855096970385518593

The next issue is what to edit & where. Theres two files _bootstrap-variables.scss & styles.scss inside the sass dir. I found the best way is not to edit _bootstrap-variables.scss but to use it as a reference for bootstrap variables that can be overridin them in styles.scss

Basically anything you want to override put it before the @import "bootstrap"; line & any of your own styles put it after the @import "bootstrap"; line

eg // file styles.scss

$gray-base:#001;
// Import Bootstrap for Sass

@import "bootstrap";

$mycolor:#ff00ff;

p.andy
{
color:$my color;
}

run
$ compass compile & you should see changes

Jin Pinger

It is very common, easy to understand document.
Thank you very much.