DEV Community

Cover image for Introduction to SASS
Matthew Palmer
Matthew Palmer

Posted on

Introduction to SASS

#css #html

Introduction

Sass (or SCSS) is an extremely powerful design tool for developers. It takes care of all the heavy lifting of regular old CSS, and so much more... A lot of new developers are afraid of it for some reason (I was too!), but you'll fall in love so fast! In fact, by the end of this blog, I'd be willing to bet your whole design game will forever change. Buckle up, this is going to be fun. 😉

Installation

This walkthrough will require VsCode. I'm sure there are other IDEs you can use, but we're going to be using a couple specific extensions.

Step 1:

Install "Live Server" by Ritwick Day

Step 2:

Install "Live Sass Compiler" by Ritwick Day

Wow, that was easy! Let's get to the fun part.

Setup

At this point, you'll want to start a new, empty project. Include an index.html file. Inside of index.html, type ! and press enter to create a very basic HTML boilerplate.

Or just copy this one:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Sandbox</title>

    <!-- CSS -->
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <div id="root">
        <header>
            <h1>Sass Sandbox</h1>
        </header>
        <div class="container">
            <h1>Welcome to the...pratice box...thing....</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor consequuntur fugit magni esse, exercitationem nisi eius ipsa commodi! Quod saepe dignissimos vel accusamus ducimus iste nam quam officia, similique neque?</p>
            <button>Here is button #1</button>
            <div>
                <button>Curvball, but here's a button in a DIV</button>
            </div>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You'll notice the ./styles/styles.css is included, and it doesn't end in .scss. This is because browsers can't read .scss files. We will be using Live Sass Compiler to compile our styles.scss file into styles.css. You'll find out how we do this next.

In the same directory, create a folder called styles. Inside of styles, place a new file called styles.scss.

Done? Great! Let's learn how Sass works!

Working with Sass

For the sake of keeping things consistent and less confusing, we're going to work off the boilerplate I included above.

Inside of your styles.scss, we can start including some normal CSS, like so:

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Looks normal, right?
Well, let's activate our Live Sass Compiler. At the bottom of your VsCode, you should see a button that says "Watch Sass".
Alt Text

Click this, and watch the magic happen! Now you'll have a generated styles.css along with styles.css.map. The latter isn't important, so let's open styles.css.

NOTE: If you don't have autosave enabled on your VsCode, you will need to manually save your changes by pressing CTRL + S

Notice how it's slightly different looking?

body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

This is only the beginning. 😉 Sass takes care of not only setting properties, but it sets your styles up to work across all browsers. Regular CSS can do this, but it takes a significant amount of effort to apply by hand.

Let's take a look at a more complex compile. Place this in your Sass file:

header {
    display: flex;
    box-shadow: 0 0 50px -20px black;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    width: 100vw;
    height: 200px;
    background-color: rgb(178, 178, 209);
}
Enter fullscreen mode Exit fullscreen mode

Now, get ready. This is what all of those properties look like when compiled for all browsers:

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 0 0 50px -20px black;
          box-shadow: 0 0 50px -20px black;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 3rem;
  width: 100vw;
  height: 200px;
  background-color: #b2b2d1;
}
Enter fullscreen mode Exit fullscreen mode

Wonderful! Sass is already starting to set off the dopamine in your brain, isn't it? Surprise, it gets better. Now we're going to learn about using variables.

Sass Variables

Wouldn't it be amazing if we could use variables in Sass like we do in, say, JavaScript? Wait... we can! Imagine that you have a specific color that you use throughout a really huge application. Among the CSS properties it's used in, you can probably imagine how much of a pain it would be to go and change every single one when you change your color scheme.

Enter in Sass variables. Here is how we would set one at the top of our Sass file:

$myNewSassColor: lightblue;
Enter fullscreen mode Exit fullscreen mode

Now we can change the background color in our header style:

header {
    display: flex;
    box-shadow: 0 0 50px -20px black;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    width: 100vw;
    height: 200px;
    background-color: $myNewSassColor;
}
Enter fullscreen mode Exit fullscreen mode

This is a very simple, narrow case but I'm sure you can see the benefit at a much larger scale. Hypothetically speaking, if you end up with 100 elements with the same background-color, I'm sure you'd agree that changing a single variable VS changing 100 styles is preferred!

Now, let's talking about nesting.

Sass Nesting

If you've ever tried tackling a project using pure CSS, you know how crazy it can get. Addressing each sub-element can turn into a nightmare. At least far as I'm concerned, it's caused me to burn out very quickly after hours of design work.

Take a look at this raw CSS:

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.container h1 {
  font-size: 3em;
  margin: 0;
}

.container p {
  width: 50%;
}

.container button {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

☝️ This is what will be returned after this 👇 Sass compiles:

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

    h1 {
        font-size: 3em;
        margin: 0;
    }

    p {
        width: 50%;
    }

    button {
        color: red;
    }
}
Enter fullscreen mode Exit fullscreen mode

This is Sass nesting! It's much cleaner, easier to read and easier to manage. Pseudo-selectors are handled differently as well, but still in a pleasing way:

h1 {
    font-size: 3em;
    margin: 0;
    &:hover {
        color: red;
    }
}
Enter fullscreen mode Exit fullscreen mode

Imports

Sass also allows us to import from other Sass files. These files start with an underscore. Let's assume you have a file named _anotherSassFile.scss.

You can write your styles in styles.scss still, but this allows us to separate by concern. We can build a Sass file for our navigation bar, one for our home page, one for a dashboard, etc. All you have to do in order to use the imports is placing @import './anotherSassFile.scss' at the top of styles.scss & you're good to go!

Sass Mixins

Mixins are similar to functions in JavaScript, and they allow us to condense repeated code into a single Mixin.

As a frontend developer, let's be honest -- You're using these properties A LOT! :

.someClass {
    display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Those three properties are damn near the bread and butter for a lot of our designs, but we have to repeat ourselves over and over. Let's make using them a little easier...

@mixin flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Our @mixin has a variable name of flexCenter. You can name it whatever you want. Whatever makes more sense to you. But now, look at how we can use it:

.someClass {
    @include flexCenter();
}
Enter fullscreen mode Exit fullscreen mode

From three lines down to one! Do you love Sass yet? No!? Still not convinced? Okay, fine. I get it. You're all about the fancy things in life. You don't like your cake without icing. Heard, then check this next part out:

@mixin Variables

You can make dynamic mixins. I'll just show this one to you:

@mixin flexCenter($direction) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction
}

.someClass {
    @include flexCenter(column);
}
Enter fullscreen mode Exit fullscreen mode

Would you just LOOK AT THAT? Sass allows us to set arguments, and they work! Enjoy that icing, buddy.

Conclusion

Sass is a very powerful tool capable of changing the way we design our web pages. From nesting to variables to mixins (basically functions), Sass completely changes the game. If you haven't found a reason to dive in yet, hopefully I've done a great job at convincing you today.

Happy Tuesday, everyone!

Top comments (1)

Collapse
 
krxzydev profile image
Zack •

This is awesome thanks for this article 🙏

Read next

abhirajadhikary06 profile image

UI Card Library

Abhiraj Adhikary -

anooppatel profile image

Futuristic Portfolio

Anoop Patel -

madsstoumann profile image

Art with CSS Grid and SVG filters

Mads Stoumann -

hanzla-baig profile image

The Ultimate Guide to Advanced CSS: Master Every Trick, Technique, and Hidden Feature🎨🚀

Hanzla Baig -