Bird’s Eye View of SASS: Supercharge Your CSS!

CSS! It’s what we use to make our HTML look pretty. SASS is another technology that takes our CSS and makes it simpler and more efficient.

Think of SASS as CSS with superpowers!

SASS stands for ‘syntactically awesome style sheets.’ With SASS you get to use stuff like variables, imports, nested rules which helps you to style your HTML faster.

Here Are The Basics of Getting Started with SASS

Syntax and File Extension

There are actually two styles of writing SASS, ‘Sassy CSS’ and ‘Indented SASS.’ ‘Sassy CSS’ is fully compatible with CSS syntax, while ‘Indented SASS’ is not. So let’s stick with ‘Sassy CSS’ for now. So from here on, whenever I say ‘SASS,’ I’m talking about ‘Sassy CSS.’

We’ll put all our SASS code in its own file with a .scss extension.

Variables

You can use variables in SASS to store information. One common example is color. You could store your primary-color, for example, as a variable. Then, instead of using the hexidecimal code, use that variable name. Think of how quickly you could then change the primary color variable one time in SASS:

Oh, by the way, let’s call our scss file “main.scss.”

$excellent-font: Helvetica;       
$neon-pink: #ff6ec7;

body {
   font: 100% $excellent-font;
   color: $neon-pink;
}

Nesting

When writing your SASS, you can use nesting to reduce the amount of code you have to write. Here’s how you might style a nav bar in SASS:

nav { 
  ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
   } 
  li { display: inline-block; } 
   a { 
      display: block; 
      padding: 6px 12px; 
      text-decoration: none; 
     } 
}

Notice how the SASS kind of mimics the HTML

Partials and Import

Why write blocks of styling over and over again in your code? Write it once and then import it where you need it.
These blocks of repeatable code are called ‘partials’. You can think of them as snippets that you can call up.

For example, let’s put a reset into a partial. First thing would be to make a separate partial file. Let’s call it reset.scss (Note that by convention, we use an “” as the first element of our name. This will remind us that this file contains a partial.

Our _reset.scss might look like this:

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

Then, in order to use the _reset.scss file, we’ll go back to our main.scss file and import it:

@import “reset”;
$excellent-font: Helvetica;       
$neon-pink: #ff6ec7;

body {
   font: 100% $excellent-font;
   color: $neon-pink;
}

Mixins

When I first saw this word, I immediately thought “cake mix”. Hmmm...maybe coding would be getting more chocolaty… Unfortunately, no such luck. However, mixins are still pretty yummy!

Think of mixins as tiny libraries. A mixin might contain some code that might allow you to do some positioning trick for example. So when you want to perform that trick, you just put out your mixin. The HUGE advantage of having a mixin is that when you need it you can just “pull it out” of your “library” and stuff it in your code. Even better, a mixin is independent of all those pesky inheritance rules of normal CSS.

For example, say you are using flexbox a lot and keep writing this over and over:

.row {
    display: -webkit-flex;
    display: flex;
}

Let’s use SASS to make this easier. We’ll store this code in a SASS mixin that we'll name 'flex':

@mixin flex {
    // write the css here    
display: -webkit-flex;
    display: flex;
}

Now, when we want to use the ‘flex’ mixin in our SASS code, we can do this:

.row {
    @include flex;
}

Now let’s make it more interesting and say we’re using the grid system on our layout and sometime we want to use flex and sometimes we want to use block display. Let make a new mixin and call it $grid. The $grid mixin will include our $flex mixin we just made as a variable:

@mixin grid($flex) {
    @if $flex {
        @include flex;
    } @else {
        display: block;
    }
}

Now that’s done. We’ll use it like this. Say we’re coding along and decide to use our $flex in a certain section. We can use @include to call the mixin like this:

@include grid(true);   

Those were a couple of my fav SASS features. Overall, SASS really shines on larger programs where there would be a lot of CSS. SASS will help you write cleaner and less code more rapidly. It is stable, powerful and elegant as it is an extension of CSS. Using the @import feature, you can modularize your code making it easier to maintain. SASS also has a large community and, of course, an official SASS documentation page. In the end, SASS has an easy learning curve, powerful functionalities, which will power-up your productivity right away.

Happy Coding!