Transitioning To SASS - A Beginners Guide.

Sometimes it's tough to give up the things you are comfortable with. Even though you might know deep down that breaking your old habits or learning something new is the right choice, it's still hard to actually do it.

I was pretty comfortable with my CSS knowledge when I started my new web development job. Now, I still needed to look something up every time I started styling but I'm going to blame that on staying up past my bed time too often.

My new development role is spend mostly working with Drupal and so far, the Big Commerce framework Stencil and the amount of time that I've spend smashing my head against the proverbial wall has forced me to find efficiencies elsewhere

*SASS enters

The theme we work with in Drupal and the Stencil framework comes set up with SASS out of the box - we just weren't using it to its full capabilities.

What is SASS?

SASS stands for Syntactically Awesome Style Sheets. It's essentially an extension language for CSS that takes your grandmothers walker and turns it into a sweet hoverboard or one of those water jetpacks. It sounds like my grandma would've loved SASS, I'm sure.

SASS takes your normal CSS styling language and turns it into a programming language by giving it additional capabilities.

SASS works by compiling your .scss files and creating CSS generated sheets specifically for your project. It takes the variables and all of the other features of SASS and creates the typical CSS stylesheet your used to seeing.

Coming from a mostly front-end word, turning my beloved CSS into a programming language sounded scary.

Here's why it shouldn't be scary for you.

What we'll cover here

I'm going to go too in depth with SASS in this post. Frankly, this is probably just me getting my thoughts written out but hopefully this can help you get started with SASS. Here's what we'll cover

Specifically, SCSS

$variables

@mixins

_partials

...and more

SCSS - Sassy!

SCSS and SASS files extensions are similar in many ways. We'll be focused on SCSS (both in this article, and in practice) and I recommend you do the same.

The reason is that SCSS files are very similar to the CSS syntax we're used to writing and standard CSS will work in files with .scss extension

/// This is a .scss extension file
body {
    color: $primary-color;
    padding-top: 15px;
}

/// This is a .sass extension file
body
    color:orange
    padding-top: 15px

$variables

For me, variables were one of the deciding factors that brought me to SASS. This is a powerful bit of syntax that not only solves the problem of always rewriting the same code on a certain project, but also gives you some relief when you're dealing with clients who can't seem to make up their mind.

With variables, instead of changing a color hex code 20 times in your CSS file for that client, you're only changing it once.

Here is a simple example of variables in action

$primary-color: #f05a28;
$primary-font: "Lato", sans-serif;

h1 {
    color: $primary-color
    font-family: $primary-font;
    padding-top: 15px;
}

Variables are a game changer for CSS. This helps us maintain consistency across big projects.

@mixins

Mixins take variables to the next level. I guess you could think of mixins as variables for blocks of CSS. For example, if you're always having to create the same blocks of styling over and over for different classes, mixins are the solution.

There are a number of reasons why we would use mixins but this is the method used most often for me.

@mixin removespace {
    margin: 0;
    padding: 0;
    width: 100%;
}

.box-of-space {
    @include removespace;
}

/// Here is the CSS output
.box-of-space {
    margin:0;
    padding: 0;
    width: 100%;
}

The power of mixins doesn't stop there. Mixins have the ability to essentially become a function. If you're familiar with Javascript, this might make more sense.

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

This is a snippet from the official SASS docs.

I'll be honest, I've never actually had to use this feature. Although I haven't used it, it doesn't mean we shouldn't know about it. Think of how much easier Dark Mode becomes if we're going to use them.

_partials

Partials are something that I'll be taking advantage of now that I'm working with a team in a professional setting. Partials are files in your library that aren't actually generated into CSS, they almost act like references.

/// file:  _button.scss

$bgColor: #58585b;
$type-family: "Lato", sans-serif;
$primary-color: #fff;


/// file:  style.scss

@use button

.angry-button {
    color: button.$primary-color;
    font-family: button.$type-family;
}

.overlay {
    background:button.$bgColor
}

For us, we can start creating a library of partials that we can send to our development projects to speed up building process and create brand consistency.

For clients with multiple websites, we'll see huge benefits with partials.

What else?

There is way more here in SASS that I'm not utilizing. Here are a few:

Nesting

Inheritance

Operators

Functions

A few minor features I frequent

Nesting and being able to access the parent selector with & has been extremely helpful. It helps keep my code readable and clean.

/// Nesting

header {
    color: white;

    &:hover {          /// Genertates header:hover
        color: blue;
    }

    ul {
        margin: 20px;

        li {           /// Generates header > ul > li
            color: green;

            &:hover {  /// Generates header > ul > li:hover
                color: yellow;
            }

        }

    }

}

SASS has been an amazing tool for speeding up the design process and being able to reuse components from previous designs without putting all the leg work into re-creating.

If you haven't tried SASS, hopefully this can act as a very brief intro to a tool that will certainly help you improve your styling capabilities.