# 
## Introduction

**Sass** means "syntactically awesome style sheet". Sass is a preprocessor programming language that is interpreted or compiled into [Cascading Style Sheets (CSS)](https://www.educative.io/answers/what-is-css). The scripting language itself is called SassScript. The sass is saved with `.scss` or `sass` extension.

Saas uses Inheritance to make it easier. Few codes are written to carry out different tasks.
To minimize the amount of typing and/or combining required, Sass enables us to inherit properties from other selectors.

Suppose we have many `div`s with the same properties but different `font-size`. We can define a basic `div` style where all the `div`s will inherit from each of their styles. Then they have their own custom styles declared within.

## Code example

Inheritance is done in Sass with the `@extend` rule, this is followed by the selector we want to inherit from.

Let’s look into an example to explain how it works.

Suppose we want to define three `div`s with the same `margin`, `padding`, and `font-size` but with different `color` and `background-color`. 

This can be done by defining a selector with the basic properties. We define the selectors of the `div`s, we make them inherit from the basic selector, and then we define their custom properties.


Let's look at the code below:

<html>
 <head>
 </head>
 <body>
   <div class="basicDiv">This is the basic Div</div>
   <div class="blueDiv">This is the blue Div</div>
   <div class="redDiv">This is the red Div</div>
   <div class="whiteDiv">This is the white Div</div>
 </body>
</html>

.basicDiv{
  margin: 5px;
  padding: 3px;
  font-size: 120%;
  width: 70%;
  height: 50px;
}

.blueDiv{
  @extend .basicDiv;
  color:#fff;
  background-color: #00ff;
}

.redDiv{
  @extend .basicDiv;
  color:#000;
  background-color: rgb(255, 0, 0);
}

.whiteDiv{
  @extend .basicDiv;
  background-color:#fff;
}

codemirror

## Code explanation

In the CSS (`scss`) column:

* **Line 1**: We declare a class selector with some properties. The name of this selector is `.basicDiv`.

* **Line 7** : We declare a new class selector, `.blueDiv`. The`@extend` is used so that this selector inherits the properties of the `.basicDiv`. Then new properties is added to it.

* **Lines 13 and 19** : The same process in **line 7** was carried out with two new selectors -`.redDiv` and `.whiteDiv`.

The `scss` is then compiled into CSS file.

.basicDiv, .blueDiv, .redDiv, .whiteDiv{
  margin: 5px;
  padding: 3px;
  font-size: 120%;
  width: 70%;
  height: 50px;
}

.blueDiv{
  color:#fff;
  background-color: #00ff;
}

.redDiv{
  color:#000;
  background-color: rgb(255, 0, 0);
}

.whiteDiv{
  background-color:#fff;
}

All the selectors are defined with `.basciDiv`'s property, and then `.blueDiv`, `.redDiv`, and `.whiteDiv` are defined with their custom properties.



Inheritance in Sass

Sass uses the @extend rule for inheritance, enabling shared properties among selectors with unique customizations.
