Introduction to Sass/Scss

Sass (Syntactically awesome style sheets) is an extension of the CSS which adds syntactic power to the basic CSS language making it easier for developers to write CSS. In simple words, it is just a CSS pre-processor, so that you can write CSS in an easy and convenient way.

Prerequisites

Before you start learning Sass you should have a knowledge and good understanding of CSS. If you know the basics of it then you are good to go with Sass but anyways if you are good with CSS then it will help you to explore more about Sass. You can learn CSS from here if you are new to it.

What is Sass?

Sass (Syntactically awesome style sheets) is an extension of CSS which has turned the whole process of writing CSS code easier. SASS is like a new-age version of CSS which comes loaded with the features that developers around the world wished CSS could have. Although the latest CSS3 supports a lot of new syntactic changes, it still lacks behind in many aspects. Let's take a simple example, for Studytonight's website, our primary color scheme has shades of Purple and shades of Orange in our CSS.

Now, these two color Hexa codes are used for different CSS classes used to style buttons, text, backgrounds as you must have seen in different sections of our website. Also, every now and then we keep on changing the color shades keeping the color the same as a result of which we have to change the Hexa code at multiple places in the CSS file. This is one of the many problems that we face with CSS.

Using SASS/SCSS we can define variables at the top of the styling code, assign it a value, it can be a Hexa code or anything else and then use the variable in the CSS code.

$purple: #6A67CE;
$orange: #FF9100;

.purple-btn
{
	text-align: center;
	background-color: $purple;
}
.purple-text
{
	color: $purple;
}

Another good example of the benefits of using SASS/SCSS related to color usage in CSS is, its super easy to define the accent colors of the primary color. For example, if you have noticed the buttons on our website, they change color to a somewhat darker shade when you hover the mouse on the button or click on the button. In CSS, we have to specify the Hexa code of both the colors like this,

.purple-btn
{ 
    text-align: center; 
    background-color: #6A67CE; 
}

.purple-btn:hover 
{ 
    background-color: #5653BD; 
}

To find the right color and then change the Hexa code in the CSS file becomes very tedious when your designer keeps on asking for a different shade. This is also handled very gracefully by SASS/SCSS. In the SASS code below we have defined an accent 15% darker than the original color for the hover effect on the button.

$purple: #6A67CE;
$darkpurple: darken($purple, 15%);

.purple-btn 
{
    text-align: center;
    background-color: $purple;
} 
.purple-btn:hover
{
    background-color: $darkpurple;
}

This way we can even control the shades of our primary color using variables for disabled effect, hover effect, selected effect etc.

Sass is a Scripting language that is compiled into CSS. SASS can be considered as an extra layer of abstraction added upon CSS to make it easier for the developers to write extensive CSS code. The SASS code can be easily converted into the CSS code using simple SASS command. This style sheet language was initially designed by Henry Thornton and developed by Natalie Weizenbaum.

Difference between SASS vs. SCSS

There are two syntaxes of Sass i.e SCSS and SASS with two different file extensions ".scss" and ".sass". Sassy CSS or just SCSS is the most commonly used. The syntax of SCSS is similar to the CSS3 syntax. Hence we can say that every CSS3 stylesheet is SCSS as well. While the SASS is the older version, one of the major differences in writing these two is the use of semicolons and brackets. The older version uses the indentation of the lines to specify the code blocks. Whenever you use SCSS you need to give .scss as your file extension, .sass otherwise. We will discuss sassy CSS(SCSS) here as it is most commonly used.

SCSS syntax was introduced in version 3 of Sass. Sass syntax is good but one of the main reasons SCSS was introduced is, Sass intended syntax is so foreign to CSS, that its adoption became difficult. So why spend time learning new syntax? Hence SCSS was created which has a syntax similar to the CSS syntax.

Let's consider an example using both the syntaxes,

<nav>
    <ul>
        <li>List item</li>
    </ul>
    <a href="https://google.com">Google</a>
</nav>

This HTML code consists of a navbar that has an unordered list and a link. If the style for this HTML is written in the Sass syntax then it will look like as shown below.

nav
    ul
	margin: 0
	padding: 0
	list-style: none
    li
	display: inline-block
    a
	display: block
	padding: 6px 12px
	text-decoration: none	

In the SASS syntax above, you can see that we have used indentation to define blocks rather than using curly brackets { }. Similarly, in SCSS syntax, it will look as below.

nav {
    ul {
	margin: 0;
	padding: 0;
	list-style: none;
    }
    li {
	display: inline-block;
    }
    a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
    }
}

In the SCSS syntax, we use curly brackets, just like in CSS. The generated CSS for this will look like as shown below,

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

As you can see in the example above, SASS/SCSS introduced the nested syntax which is easier to understand and code too. This example is just for understanding the syntax of both SASS and SCSS.

SASS to CSS: Transpilation

Transpilation is the process using which the SASS/SCSS code is converted into CSS code. It is just like compilation but in compilation one human-readable language is converted/compiled into a machine-readable format whereas in transpilation one human-readable format is converted into another human-readable format which is SASS/SCSS to CSS.

You can easily find transpiler tools online to convert your SASS code to CSS.

Note: SCSS or SASS file cannot be included in the HTML directly, it needs to be transpiled first so that CSS code is generated which can then be used in the HTML files.

Why use SASS/SCSS?

Writing CSS can be fun on its own, but when there's a huge amount of CSS code used then it is difficult to maintain and keep track of different modules, whereas SCSS provides us a way to tackle these problems by introducing features like variables, mixins, etc. Below mentioned are some of the benefits of SCSS:

• It uses nested syntax, which is more readable.

• It offers the use of variables, as seen in the examples above.

• The syntax is similar to CSS, hence the learning curve is easier.

• Functions(mixins) can be created with SCSS.

• It allows Inheritance too.

What is Dart SASS?

SASS has many different implementations, Dart Sass is the primary implementation of Sass. It's fast and easy to install. Dart Sass is used to compile Sass code to CSS. Dart Sass comes with a command-line executable that uses bazing fast Dart VM to compile your stylesheets.

You can download it using these downloading instructions. It is also distributed to as pure JavaScript sass package on npm.

In the next tutorial, we will learn how to set up SASS in your development machine and learn about some important commands for getting started.