HTML and CSS Basics, part 17: Introduction to SCSS

This is the 17th post in this series of articles.

In this article, we’ll be learning about a superset of CSS called SCSS.

In 2007, Hampton Catlin came up with Sass, Syntactically Awesome Stylesheets, written in the Ruby programming language.

You might have also come across the SCSS acronym, which stands for Sassy CSS.

Both Sass and SCSS are so-called CSS pre-processors.

Even though Sass was written in Ruby, its discontinued - meaning there’s no active development since the first half of 2019. You can still use it, though.

The most popular version of Sass today is Node Sass. We’ll cover how to install it and use it later on in this article.

For now, let’s see a quick demo of what Sass/SCSS does.

A Sass demo

To see a quick demo of Sass in action, let’s navigate to the sassmeister.com website.

We begin our Sass file by declaring a class called box:

.box {
    width: 100px;
    height: 100px;
    background: white;
}

Next, we declare a Sass class of border, like this:

.border {
  border: 1px solid gray;
}

All of the above code so far is just regular CSS; there’s nothing there we haven’t already seen.

However, consider the next few lines of Sass code:

.card {
  @extend .box;
  @extend .border;
}

This is not CSS syntax; there’s no @extend in CSS.

What does this code do?

It combines the styles from both the box class and the border class.

This is great for keeping our code DRY, because the Sass compiler will know how to append the card class in the proper places in the compiled CSS code:

.box, .card, .card-important {
  width: 100px;
  height: 100px;
  background: white;
}

.border, .card, .card-important {
  border: 1px solid gray;
}

Consider the option of us doing this manually. We’d have to make sure we’ve done either one of these two things:

1. Append the class of card-component wherever needed, or
2. Redeclare the complete CSS in the new card-component class

The first case would mean we would need to meticuluosly search for all the places in our stylesheet that might need to have the card class added (in order avoid bloated CSS, i.e keep our code dry).

The second case would mean we’d make it easy on ourselves, but we’d have a bloated CSS file with lots of redundant repetitions.

This is just one example of how Sass/SCSS helps us improve our CSS.

Next, we’ll list out some other benefits of using Sass/SCSS over regular CSS.

Benefits of using Sass/SCSS

Here’s a list of benefits to using SCSS instead of CSS:

1. You can use only CSS syntax, but you have option of using @include syntax to include partial CSS files. It’s like building CSS lego blocks!
2. In the past, only SCSS had variables; now this is no longer exclusive to SCSS since CSS has custom properties
3. SCSS has nested syntax, thereby mimicking the HTML structure the styles are to be applied to
4. It comes with its own functions and @mixins (a kind of a function in SCSS)
5. It allows us to easily customize most modern front end frameworks, including Bootstrap

Before we see how to get started with SCSS on our local machine, we’re going to look at another example, which might look really difficult:

@mixin componentContainerSize {
    // in Pixels:
    @for $i from 1 through 10 {
        $val: #{$i}unquote("px");
        .width#{$i} {
            width: $val;
        }
        .min-width#{$i}{
            min-width: $val;
        }
        .max-width#{$i} {
            max-width: $val;
        }
        .height#{$i} {
            height: $val;
        }
        .min-height#{$i} {
            min-height: $val;
        }
        .max-height#{$i} {
            max-height: $val;
        }
    }
}
@include componentContainerSize;

The above syntax is an example of an SCSS mixin. While it might look scary, it’s actually nothing hard to understand.

The first line of the above mixin begins with @mixin componentContainerSize {.

As we can see, we begin with the @mixin keyword, and we give it a name, in this case, componentContainerSize.

Next, we use the for loop to repeat the code inside the loop 10 times:

@for $i from 1 through 10 {

Next, we have a temporary variable, called $val, and we set it to a specific pixel value, based on which iteration $i the loop is at currently:

$val: #{$i}unquote("px");

Note that the above syntax will work if you’re using the actual Ruby Sass compiler.

The next line is .width#{$i} {, and this is known as “variable interpolation” in many computer languages.

On the next several lines, there’s lots of repetitive code, and finally, on the last line, we run the @mixin we defined above. This is the line of code that runs the mixin:

@include componentContainerSize;

If you’re feeling overwhelmed, don’t be too concerned. This syntax takes some time getting used to. It will probably be helpful to see what this code compiles to, so let’s visit sassmeister.com again to see what the above code will compile to.

The above short SCSS code will actually produce about 240 lines of CSS code!

The first several lines of code will look like this:

.width1 {
  width: 1px;
}
.min-width1 {
  min-width: 1px;
}
.max-width1 {
  max-width: 1px;
}
.height1 {
  height: 1px;
}
.min-height1 {
  min-height: 1px;
}
.max-height1 {
  max-height: 1px;
}

…and the last several lines of code will look like this:

.width10 {
  width: 10px;
}
.min-width10 {
  min-width: 10px;
}
.max-width10 {
  max-width: 10px;
}
.height10 {
  height: 10px;
}
.min-height10 {
  min-height: 10px;
}
.max-height10 {
  max-height: 10px;
}

Understanding SCSS will make you a better developer. I think it is important to mention it and showcase how it’s used; even though you might not be using it, it’s important to understand it and know at least some basics of it and be aware of what are some of its features.

Get started using Sass/SCSS on your computer

Since the original rubysass is deprecated, we’ll be working with Sass on Node.

In order to do that of course, [we need to have Node and npm installed on our computer].

Luckily, we’ve already covered how to install Node and npm right here on codingexercises.

Feel free to also check out our in-depth introduction into the basics of npm, Node, and JavaScript modules.

Initializing a new project to test node-sass

Assuming you’ve got Node and npm installed, we can now open a brand new folder where we’ll test our Sass/SCSS code.

Let’s pick a location: our computer’s desktop. We’ll give our new folder a name, say testing-sass.

Now we need to point our shell to this folder, and run the following command:

npm init -y

As you already know if you’ve read the in-depth article for starting out with Node and npm, running the above command has created a new package.json file with default settings.

Now let’s install node-sass.

Installing node-sass

Let’s now install the node-sass Node module, with the following command:

npm i node-sass -g --verbose

Note that the i above is an alias for the install command. The --verbose flag will turn on verbose logging.

The module you’ve just installed will enable npm to compile your Sass/SCSS code into regular CSS code.

To verify the installation was successful, you can check out the updated package.json:

{
  "name": "testing-sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "node-sass": "^4.12.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Next, let’s run node-sass.

Running node-sass

The current structure of our testing-sass folder looks like this:

testing-sass/
 ├── /node_modules/
 │ ├── .../
 │ └── .../
 ├── package-lock.json
 └── package.json

Before we can compile some SCSS code, we first need a SCSS file that we’ll be compiling.

So let’s add one, call it example.scss, and add it the following code:

$bg-dark: darkgray;

.bg-dark {
    background: $bg-dark;
}

Now we’ll need to compile the above SCSS code into regular CSS, using node-sass.

Compiling our SCSS file

To compile our SCSS file, we need to point our command line tool to the testing-sass folder, and then run this command in the command line:

npx node-sass example.scss example.css

This is the output in the command line:

Rendering Complete, saving .css file...
Wrote CSS to C:\Users\PC\Desktop\example.css

If you opened the new example.css file, you’d see this compiled CSS code:

.bg-dark {
  background: darkgray; }

Feel free to add some more SCSS code and see the output in your css file.

In the next article in this series we’ll be build our own micro css framework.