Let’s Learn SASS & SCSS: Getting Up And Running (Part 1)

If you’ve been in web development long enough, you’ve probably heard of SASS/SCSS. That’s no surprise, considering it has been around for so long(over 10 years), and it’s included in many popular build systems. Webpack builds such as create-react-app and Vue CLI templates come with easy SASS support. If you’re using your own build system, getting up and running with something like Gulp is never easier thanks to the plethora of libraries available.

In short: it’s everywhere. That alone makes it worthwhile to learn SASS since you’ll likely run into it eventually. That can’t be the end of it. Isn’t there more to it? Doesn’t it make development quicker and more pleasant? Won’t it make you never want to work with plain CSS again? In my opinion, the answer is yes. Why? I hope to show you in this multi-part tutorial series when we dive in and really learn SASS.

Whether you’re a complete beginner or have some familiarity but want to dive deeper, this tutorial series is aimed for you. I plan to not only cover the bare basics, but the deeper parts of SASS that really change the game when it comes to front-end development. Let’s get to it!

SASS vs SCSS: Is There A Difference?

When you dive in and start to learn SASS, it’s likely you’ve seen these two terms interchanged. To me, they’re essentially the same things and tend to be used interchangeably. However, there is a subtle difference.

SASS(which stands for syntactically awesome stylesheets), was first introduced and had its own syntax. It wasn’t very similar to CSS and required strict indenting. However, the main functionalities such as math and variables were there. SCSS is a syntax language that was introduced later to make development more intuitive for someone with a plain CSS background.

SCSS removed the strict indenting, and built on top of CSS. Now, writing SCSS had the same feel as CSS. You could even take a plain CSS file and port it to a .scss file. Everything would work the same. As you can imagine, this makes the notion of learning SASS much easier for beginners. That’s the cool thing about all of this, you really don’t have to learn anything radically different to start.

In short: SASS was the original preprocessor that converts SASS code to plain CSS, and SCSS is the syntax language built on top of SASS to make development and learning easier.

SCSS is used about 99% of the time- you won’t ever see plain SASS out there anymore. However, you may see the words interchanged. I wouldn’t worry too much about this since you’ll likely write SCSS.

Source

What Makes SCSS So Great?

SASS is essentially a superset of CSS. CSS with extra features(that are actually supported in popular browsers). Examples of these include variables, selector nesting, and “functions” for css code. If these sound unfamiliar to you, we’ll explore each of these features shortly.

At the time of this writing, CSS variables are almost available natively across all browsers, except Internet Explorer 11. However, SASS offers much more than simple variables. Developers pick up and learn SASS for a few main reasons.

  • Speeding up development time. SASS gives you opportunities to reuse blocks of code(mixins and extends), easily split up files into manageable chunks, and find and organize CSS selectors(selector nesting).
  • Doing things you can’t with CSS. This may seem obvious, but most SASS features simply aren’t possible with CSS. SASS makes some things easier, but also unlocks a whole new way of approaching problems. You can get creative with it, there’s lots of examples of SASS creativity on sites like CodePen.
  • Splitting up files. Ever deal with a 2000+ line CSS file? Ever seen stylesheets overwrite other stylesheets with no real organization? It turns into specificity hell real quick. SCSS lets you easily split up files and organize them into folders. How you organize files is up to you, SASS gives you all the flexibility you need.
  • Managing large projects and teams. Organization is key when it comes to large projects. Using classic CSS methodologies like BEM is easy to integrate with a typical SASS structure. If the project is organized well, onboarding new team members and collaborating with existing developers just makes so much more sense.

Let’s dive into the real meat of SASS, the actual features. Picking these up will take some time, but it’s not as hard as you may think! Spend a few days to weeks learning SASS and you’ll start finding ways to integrate these into your typical workflow. Let’s get exploring!

Example: Variables

Variables have been a long-awaited feature of CSS, and it’s even almost there natively! Why is it in so much demand? The simple reason is: DRY (don’t repeat yourself). When you choose a color scheme for a site, it typically has a few colors that can be used across multiple elements.

What happens when you want to update a shade of a color? You’ll probably have to update it in 2, 10, or even 50 places across the source code. What if we only had to define a color in one place? Well with SASS, you certainly can!

#carasoul1 {
    background-color: #EDEDED;
}

#menu1 {
    background-color: #EDEDED;
}

#menu2 .active {
    background-color: #EDEDED;
}

...

Can turn into:

$light-grey: #EDEDED;

#carasoul1 {
    background-color: $light-grey;
}

#menu1 {
    background-color: $light-grey;
}

#menu2 .active {
    background-color: $light-grey;
}

...

It’s not too hard to see how useful this can be. Now if we want to use a different light grey, just change it in the one variable!

Example: Nesting

Nesting is a concept that can be applied immediately without any real overhead. In theory, it’s incredibly simple. Although simple, its use cases become immediately useful by establishing a visual hierarchy.

#carasoul1 {
  background-color: blue;
}

#carasoul1 .logo-container {
  display: flex;
  justify-content: center;
}

#carasoul1 .logo-container img {
  width: 64px;
  height: 64px;
}

In the above example code, we apply three different sets of rules for three different selectors. All of them have the same parent selector, #carsoul1. How can SASS help us clean this up?

#carasoul1 {
  background-color: blue;

  .logo-container {
    display: flex;
    justify-content: center;

    img {
      width: 64px;
      height: 64px;
    }
  }
}

This works perfectly fine in SASS. When the code is compiled down to CSS (more on this later), it ends up being the exact same code as the first example. .logo-container is nested within #carasoul1, and img is nested within .logo-container. Visually, once you get used to it, it’s a lot easier to tell what selectors are really doing.

Example: Mixins

SASS brings what are basically functions to CSS. As you learn SASS, you’ll find these to be incrementally more helpful. A mixin works very similarly to a regular function in something like JavaScript, so it might not look too unfamiliar. Let’s dive in with an example.

@mixin font($font) {
  font-family: $font, "Helvetica", "Arial", "sans-serif";
}

h1.roboto-font {
  @include font("Roboto");
}

h1.lato-font {
  @include font("Lato");
}

This mixin creates a classic font fallback pattern. With the mixin, we remove the need to memorize the fallback options and only pass in the font family value. This is a simple example, and we will dive deeper into this topic.

If you want to dive deeper:

Example: Extends

Extends are similar to mixins, but they don’t allow passed arguments. Extends are for repeating blocks of code, while mixins are for repeatable dynamic blocks of code. We’ll dive more into this topic in later articles. Here’s a practical example:

%hard-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

%align-right {
  display: flex;
  align-items: flex-end;
}

#carasoul3 .container {
  @extend %hard-center;

  .icon-container {
    @extend %align-right;
  }
}

With extends, you can repeat blocks of code but only define them in one place. You can also abstract blocks of code with a naming convention you prefer. They come in handy whether you’re extending 2 lines, or even 10 lines of code.

Example: Math

SASS brings basic math functions to CSS. While I don’t use these much, they come in handy once in a while. SASS supports operators like pi, ceil, floor, and max/min. When using units, they are automatically converted for you. For example, 10px * 5 becomes 50px. This can be useful when creating advanced dynamic mixins.

@mixin calculateSpacing($margin) {
  margin: 5px * $margin;
  padding: 10% * ($margin/4);  
}

.container .column-1 {
  @include calculateSpacing(10);
  // margin: 50px;
  // padding: 25%;
}

Resources:

Let’s Dive Deeper!

In conclusion: SASS is pretty awesome! There’s so much you can learn, and it really starts to advance your development workflow. When you learn SASS, there’s many little tricks and tips you’ll pick up on the way. You’d be surprised what kind of solutions are out there.

What trips beginners up is setting up the build process and understanding how to compile SCSS to CSS. That’s why we’re going to learn how to setup a basic build so we can start really diving into SASS. In the next articles, we’ll dive into the above topics in depth plus more. It’s an exciting journey and I hope to see you there!

Read Part 2: Setting Up a Build

Comments