Write your first SASS stylesheet

What is SASS?

Sass or Syntactically Awesome StyleSheets is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called “the indented syntax,” uses a syntax similar to Haml.

Why SASS?

Using Sass, you will be able to write clean code and will also prevent repetitions of CSS code. Maintaining CSS code is much easier too.

Sass Syntax

Sass supports two syntaxes.

• SCSS(Sassy CSS): it uses the file extension .scss . It is the easiest syntax and the most popular.
• Indented Syntax: it uses the file extension .sass . It uses indentations instead of curly braces, unlike SCSS.

I will be using the SCSS syntax in this article.

Compiling SASS

Your browser can’t interpret Sass directly. It must be converted first into CSS before the browser can execute it. Compiling Sass code means interpreting the code for the browser to understand, which is CSS.

How do we compile?

We need to install sass first and you must have node and npm installed on your computer.

npm install -g sass

If you need help with the installation, you can refer to the official Sass website.

We can now compile the sass file.

Let’s say we created a Sass file named styles.scss and we want to compile it. Go the directory where the file is located and run the following command in the terminal

sass styles.scss styles.css

The sass command takes two arguments, the first argument being the input which is the sass file and the second argument is the location where the compiled CSS file will be saved. Here, the CSS file will be saved in the same directory as the sass file.

You can also watch individual files with the --watch flag. The watch flag watches your sass file for changes and re-compile each time you save the sass file. You won’t have to run the command manually every time.

sass — watch styles.scss styles.css

Nesting in Sass

The first feature of sass we will look first is Nesting. Sass allows you to nest CSS selectors inside another selector. For example

.parent {
  margin: 30px 10px;
  .child {
    background-color: green;
  }
  .another-child {
    background-color: violet;
  }
}

The SCSS code above will produce the CSS code below when compiled

.parent {
  margin: 30px 10px;
}
.parent .child {
  background-color: green;
}
.parent .another-child {
  background-color: violet;
}

You can also nest properties. Let’s see how.

.box {
  padding : {
    top: 10px;
    bottom: 20px;
    right: 30px;
    left: 40px;
  }
}

The SCSS code above will compile to the CSS code below

.box {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-right: 30px;
  padding-left: 40px;
}

Notice the : colon symbol after declaring the property name which is padding. Whenever you want to nest CSS properties, you append the name of the property with a colon : symbol.

Variables

Variables in Sass is just like variables in any programming language. Variables are used in storing data so that they can be reusable. In Sass, the $ symbol is used to define a variable.

$bg-color: red;
$text-color: #fff;
$width: 100%;

.box {
  background-color: $bg-color;
  color: $text-color;
  width: 100%;
}

The SCSS code above will produce the CSS code below

.box {
  background-color: red;
  color: #fff;
  width: 100%;
}

There are many other feature Sass supports but nesting and variables should get you up and running.