Sass: CSS, But Better

What is Sass?

Sass is essentially CSS, but better. SASS stands for ‘syntactically awesome stylesheets’ and I couldn’t describe it better. It implements a lot of features from other programming languages and makes it feel much more like a fully fleshed out language.

How To Setup Sass

The first step is the most important. In order to write Sass in your IDE, you should install a Sass extension. This is required, as not only does this help with syntax highlighting, it also allows you to process your Scss file into a CSS file. Scss isn’t natively recognized by browsers, so you essentially need to convert it to CSS. If you’re using Visual Studio code, you can paste this string into the extensions search-bar and it should show you the extension I use: ‘ritwickdey.live-sass’

Next, you want to create your Sass file. Instead of creating a file with the traditional ‘.css’ extension, you want to create a file using the ‘.scss’ extension. As with any other preprocessing technology, you shouldn’t create a file using the vanilla extension, as it won’t actually end up getting processed and the browser that ends up running it won’t know how to use it, as it’s using a syntax that it’s never seen before.

You might be wondering; if the browser doesn’t read Sass, how do I convert it to CSS? Well, this is where the extension you installed earlier comes in. If you’re using Visual Studio Code, you should see a button at the bottom of your IDE labeled ‘Watch Sass’. If you click that button, any updates you make to your Sass file will automatically be compiled and written into a CSS file of the same name in the same directory. Be careful: if you already have a CSS file with the same name as your Sass file in the same directory it will overwrite it, so make sure that you move your original CSS into your Sass file before you press the ‘Watch Sass’ button!

Now you can link the compiled CSS file to your HTML or JSX file.

So what’s so good about Sass?

Variables

With vanilla CSS you have variables. However, they’re pretty clunky to use. To declare a variable, you have to write it using this syntax:

--main-color: blue;

You need to include two dashes before the variable name, which is kind of unintuitive and lacks a visual way for me to find variables quickly.

To use a variable, you need to write:

color: var(--main-color);

Overall, just very inconsistent clunky.

With Sass, all you need to do is include a ‘$’ before the variable name:

$main-color: blue
color: $main-color

Much more consistent and intuitive!

I’ve also seen different programmers use camel case (mainColor) instead of kebab-case (mainColor) which makes variables even easier to recognize compared to the rest of your code. Note that it’s all personal preference, however, and either will work.

Nesting

Traditionally, when you want to reference a specific element by using multiple selectors, you would create a single block for that specific selector set:

div h1 {
  font-family: Verdana, sans-serif;
}

However, what if we wanted to add another selector block that is really similar? In that case, our CSS file now looks like:

div h1 {
  font-family: Verdana, sans-serif;
}
div h2 {
  font-family: Arial, sans-serif;
}

Both of these blocks are very similar as the parent selector is both the same. Since we have to write it in two blocks though, this makes it hard to stay organized and similar code gets scattered all over your CSS file. If only there was a way to avoid writing two separate blocks and just combine them into one. Well, with Sass, there is! We can nest ‘h1’ and ‘h2’ since they both have the same parent:

div {
  h1 {
    font-family: Verdana, sans-serif;
  }
  h2 {
    font-family: Arial, sans-serif;
  }
}

This helps keep your code clean and extremely readable.

Code Splitting

With most programming languages, you have the ability to separate codes into different files. This separation of concerns really helps with keeping your code clean, organized, and readable. With vanilla CSS, there is no way to split your code and you’re limited to writing all of your code in a single file. With Sass, however, this is possible. The first thing you need to do is create a separate Scss file. You can name it anything, but you just need to make sure that the name is prefixed by an underscore (example: ‘_footer.scss’). Then, to import it in another file, just write:

‘@import “./footer”;’

When your Sass is compiled, it will be combined into a single file.

Functions

Just like any other programming language, Sass gives us the ability to create functions to return values. This is useful for abstracting out and re-using code in your project. For example, say we wanted to create a function that cuts a width or height value in half and returned it:

@function half($value) {
  @return $value * 0.5;
}

This is obviously a really simple example, but I also wanted to demonstrate how easy it is to use operators as well!

Mixins

Just like functions, mixins are a way of abstracting your code. However, instead of returning a single value like functions, you basically interpolate a block of code into another block of code. One really popular use for this is with light mode/dark mode features:

@mixin color-mode($mode){
  @if $mode == dark {
    @return color: black;
  } @else {
    @return color: white;
  }
}
body { 
  @include color-mode($dark);
}

You may notice that there’s an if/else statement. Well, with Sass, we have the ability to write conditionals!

And that’s the basics of Sass! Overall, it’s an incredibly useful tool when it comes to writing stylesheets, and makes going back to vanilla CSS seem like a step back. There’s much more to Sass and this blog just covers the basics, so if you want to continue learning more, here are some links to materials that helped me learn:

Sass Documentation
Learn Sass In 20 Minutes | Sass Crash Course (Dev Ed)
Sass Crash Course (Traversy Media)
Sass Tutorial for Beginners — CSS With Superpowers (freeCodeCamp.org)