How is Sass different from CSS?

Sass is a superset of CSS and a pre-processor of CSS.

What is the advantage of using Sass?

It reduces the size and complexity of CSS code.

Can we directly give the sass file to the browser?

No, we cannot give the sass file directly to the browser. First, it will convert into a CSS file as the browser only understands the CSS file.

Name some of the different features available in Sass?

Some of the features available in Sass are Symbols, variables, directives, etc.

Table of contents

Introduction

Understanding Sass With its Working and Types

2.1.

Prerequisite

2.2.

Need of Using Sass

2.3.

Types of Sass

2.4.

Working

Example of Sass With Comments

3.1.

Comments

FAQs

Key Takeaways

Last Updated: Mar 27, 2024

Sass- Introduction

Author Naman Kukreja

Introduction

When a programmer starts to use CSS, he begins with basic designs and styles on the website, but if he has to be with the world, he must make his site more presentable.

As time passes, the designs of websites are becoming more and more complex, and sometimes there is some repetition in the designs in the sites, but we have to write them again and again in our CSS file so how can one reduce the length and complexity of the CSS file?

The answer is by using Sass. It is just an upgrade from CSS that helps programmers reduce the CSS file's complexity and length. We will learn more about Sass while moving further in the blog.

Understanding Sass With its Working and Types

Syntactically Awesome Style Sheet is referred to as Sass. It is an extension to CSS and is also known as a CSS pre-processor. It can be applied with all versions of CSS. Anyone can download Sass and use it as it is free to download.

Prerequisite

Before moving further with Sass, you should have an understanding of

HTML
CSS

Without the understanding of the above topics, you cannot understand Sass.

Need of Using Sass

Stylesheets are getting more complex, larger, and hard to maintain with time. This is the best time to use Sass.

Sass reduces the repetition of CSS and, because of this, saves time. Sass has some features that give you an advantage over CSS, like mixins, variables, nested rules, etc.

Types of Sass

The type of Sass means the syntax of writing Sass. There are two types of syntaxes that we use while writing Sass.

They both differ in extension one has an extension of .sass while the other has the extension of .scss. We will discuss both of them with an example of each.

1. SASS: In this, the files have an extension of .sass, and this enables the user to write CSS without using a semicolon and curly brackets with an added indentation for CSS properties.

Example

.example
  padding: 5px 10px
  border-radius: 5px
  border-color: green
  color: white
  background-color: black

2. SCSS: In this, the files have the extension of .scss. Here, we write the code like a standard CSS file where each declaration ends with a semicolon, and the selectors are written in curly brackets.

Example

.example{
  padding: 5px 10px;
  border-radius: 5px;
  border-color: green;
  color: white;
  background-color: black;
}

It totally depends on the user to select any method from the above two, but further in the blog, we will use scss.

Working

While working with Sass, there is one problem that the browser doesn't understand sass code itself. So to change the sass code into CSS code, we will need a pre-processor. This process is known as transpiling. So you are required to give some Sass code to the transpiler to get CSS code in return.

Point To Remember: Transpiling is a term that means taking source code in one language and translating it into another language.

Example of Sass With Comments

Think of a situation where the website has only three fonts and three background colors corresponding to them. So it becomes messy and difficult for the users to write them repeatedly. So instead of writing them again and again, we can use sass in the following way:

/* defining differnt font styles*/
$fontstyle_1: Lobster;  
$fontstyle_2: Arial;
$fontstyle_3: Roboto;
/* defining different colors*/
$color_1: rgb(64, 247, 64);
$color_2: rgb(27, 221, 228);
$color: rgb(99, 95, 95);

 
   
.main  {
    font: $fontstyle_1;// using $fontstyle_1 from above.
    background-color: $color_1;// using $color_1 from above.
}
   
.example-1 {
    font: $fontstyle_2;
    background-color: $color_2;
}
   
.example-2 {
    font: $fontstyle_3;
    background-color: $color_3;
}

This would be understood by browser as the CSS code as follows:

.main  {
    font:Lobster;  
    background-color:rgb(64, 247, 64);
}
   
.example-1 {
    font: Arial;
    background-color: rgb(27, 221, 228);
}
   
.example-2 {
    font: Roboto;
    background-color: rgb(99, 95, 95);
}

Comments

As you can see in the above sass code, both '/* */' and '//' types of comments work.

/* these types of comments can be used for commenting multiple lines together whereas

// is used for commenting a single line at a time.

FAQs

How is Sass different from CSS?
Sass is a superset of CSS and a pre-processor of CSS.
What is the advantage of using Sass?
It reduces the size and complexity of CSS code.
Can we directly give the sass file to the browser?
No, we cannot give the sass file directly to the browser. First, it will convert into a CSS file as the browser only understands the CSS file.
Name some of the different features available in Sass?
Some of the features available in Sass are Symbols, variables, directives, etc.