SASS(SCSS) : CSS With Superpower

I hope you guys are doing well. Today I’m gonna give you a brief introduction to SCSS.

So, What does SASS(SCSS) is?

SASS full form is a Syntactically Awesome Style Sheet but it is sometimes referred to as Sassy Cascading Style Sheets.
It is a superset of CSS. It has features that make CSS more powerful and easy. It includes interesting features that CSS lacks
like parent-child styles, flexible CSS variables, and conditions. Yeah, you read correctly!!! with SCSS we can do some programming stuff in CSS too.
Interesting Isn’t it? SCSS has lots of more cool features.

Prerequisite :

— Basic knoweldge of CSS.

First of All, what are the differences between SCSS and CSS?
SCSS is a framework based on CSS and CSS is the core stylesheet. SCSS expands the functionality of CSS and makes it much more efficient.
Also, SCSS is a preprocessor of CSS, at execution SCSS code will compile into pure CSS.
This we can say that SCSS is CSS with more power.

Getting Started:

To use SCSS or SASS, first of all, you need to install the SASS compiler from their website. Now, I am gonna explain how can you use it.
For example, create a small web project with 2 files. That is an HTML and SCSS file. An example is given below.

Here, you can see that I linked the CSS file rather than the SCSS file. Because if wanna use SCSS you to save the file with the .scss extension. Then run the command :

sass –watch scss/style.scss scss/style.css
this will generate the style.map.css file and convert scss code into CSS in the style.css file, that is why I linked style.css

Now, run localhost or just open the HTML file in any browser and start coding in CSS.

Feature of SCSS
– Nesting styles

.header{
    width: 100%;
    position: relative;
    min-height: 10rem;
    background-color: #0b0c10;
    box-sizing: border-box;    
    display: flex;
    justify-content: center;
    align-items: center;
    .content{        
        .heading-color{
            color: $light-green-color;
        }
        .btn-div{
            display: flex;
            gap: 1rem;
            margin: auto;
            justify-content: center;
        }
    }
}

.custom-btn{
    border: 1px solid $light-green-color;
    color: $light-color;
    padding: 0.5rem;
    font-size: 0.9rem;
    background-color: $dark-color;
    border-radius: 3px;
    &:hover{
        background-color: $light-green-color;
    }
}

Here you can see, that we are nesting styles. This way we can easily apply a style to nested elements. Below is an example of HTML.

<div class="header">
       <div class="content">
           <h1 class="heading-color">Basic SASS</h1>
           <div class="btn-div">
               <button class="custom-btn">Sign In</button>
               <button class="custom-btn">Sign Up</button>
           </div>
       </div>
   </div>

Here, I am gonna give you an how we can use it and a few features of SCSS. Because SCSS has lots of stuff and you will find them on their documentation.

— SCSS Variables

In CSS variables look ugly and SCSS made it flashy. Just start a variable name with $ and add key-value and bang you created an scss variable.
Amazing isn’t it?

$light-color: #fff;
$dark-color:#0b0c10;
$gray-color: #c5c6c7;
$light-green-color: #66fcf1;
$dark-green-color: #45a29e;

body{
 background-color: $light-color;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-size: 16px;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Modules(Linking Different stylesheets)

When we work on large projects where we need to use different stylesheets then it’s going to be difficult to maintain reusability.

Here in SASS, we have the @rule rule, with this, we can use another stylesheet style in our stylesheet.

Mixins(Like Reusable methods)

Sometimes we need dynamic styles like we have to define some color and
based on some event or maybe on input.
We can do this in SASS and this is the most marvelous thing about SASS.