Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4/

...

/

Introduction to SCSS

Introduction to SCSS

Learn about the history and benefits of using SCSS.

We'll cover the following...

In 2007, Hampton Catlin came up with Syntactically Awesome Style Sheets (Sass), 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 preprocessors.

Even though Sass was written in Ruby, it has been discontinued, meaning there has been no active development since the first half of 2019. However, you can still use it. The most popular version of Sass today is Node Sass. We’ll cover how to install it and use it later on in this lesson.

Let’s see a quick demo of what Sass/SCSS does.

A demo for Sass

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

Press + to interact
box {
  width: 100px;
  height: 100px;
  background: white;
}

Next, we declare a border class like this:

.border{
  border: 1px solid gray;
}

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

However, consider the next few lines of the Sass code:

Press + to interact
.card{
  @extend .box;
  @extend .border;
}

The syntax is not CSS; there’s ...