Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Understanding Sass With its Working and Types
2.1.
Prerequisite
2.2.
Need of Using Sass
2.3.
Types of Sass
2.4.
Working
3.
Example of Sass With Comments
3.1.
Comments
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024

Sass- Introduction

Author Naman Kukreja
0 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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

  1. How is Sass different from CSS?
    Sass is a superset of CSS and a pre-processor of CSS.
     
  2. What is the advantage of using Sass?
    It reduces the size and complexity of CSS code.
     
  3. 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.
     
  4. Name some of the different features available in Sass?
    Some of the features available in Sass are Symbols, variables, directives, etc.

Key Takeaways

In this article, we have learned about the overview of Sass, its functions, working, types with examples.

If you want to learn more about different CSS frameworks, then refer to this blog here, you will get a whole idea of different CSS frameworks.

Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass