Inherit a class to another file in Sass

The SASS is a pre-processor built on top of the CSS to manipulate the CSS code better. It contains multiple directives and rules, making it easy to write CSS code. It also contains some very useful features such as inheritance, if/else statements, functions, etc.

In SASS, we can import one file into another file and use one file's content for another. It also allows us to create inheritance between multiple classes. We can use the @extend directive to inherit one class to another class. By using inheritance in CSS, we can increase the reusability of the code.

In this tutorial, we will learn to inherit a class from another file in SASS.

Syntax

@import "filename";

.element {
   @extend .classname;
   // other css
}

We used the @import rule in the above syntax to import the file. After that, we used the @extend directive to extend the 'element' class with the 'classname' class.

Example 1: Basic Class Inheritance

In the example below, we have demonstrated the basic class inheritance. Here, in the card.scss file, we added the 'card' class with some CSS properties. We can say that it contains all basic CSS properties with values that we require to create a card.

In style.scss file, we used the @import directive to import the card.scss file. After that, we styled the 'card-div' and 'card-container' classes. Also, we used the @extend rule to inherit the 'card-div' and 'card-container' classes with the 'card' class.

Filename card.scss

.card {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Filename style.scss

@import "card";

.card-container {
   @extend .card;
   width: 300px;
   height: 300px;
}

.card-div {
   @extend .card;
   width: 200px;
   height: 200px;
}

The compiled CSS output will be

.card,
.card-container,
.card-div {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-container {
   width: 300px;
   height: 300px;
}

.card-div {
   width: 200px;
   height: 200px;
}

Example 2: Inheriting Multiple Classes

In this example, we demonstrate inheritance with multiple classes. We added different classes containing CSS properties in the 'specs.scss' file. In style.scss file, we imported the 'specs.scss' file and used the @extend directive to extend all 3 classes into the 'div' class.

Filename specs.scss

.margin {
   margin-top: 10px;
   margin-left: 10px;
}

.padding {
   padding-top: 10px;
   padding-left: 10px;
}

.size {
   font-size: 20px;
}

Filename style.scss

@import "specs";

.div {
   @extend .margin;
   @extend .padding;
   @extend .size;
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

The compiled CSS output will be

.margin,
.div {
   margin-top: 10px;
   margin-left: 10px;
}

.padding,
.div {
   padding-top: 10px;
   padding-left: 10px;
}

.size,
.div {
   font-size: 20px;
}

.div {
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

Example 3: Nested Inheritance

In this example, we demonstrate nested inheritance. In the form.scss file, we created two different classes and added CSS properties.

Filename form.scss

.form-field {
   margin-bottom: 20px;
}

.input-field {
   border: 1px solid #cccccc;
   padding: 5px;
}

Filename style.scss

@import 'form';

.form-group {
   @extend .form-field;

   .form-input {
      @extend .input-field;
   }
}

The compiled CSS output will be

.form-field,
.form-group {
   margin-bottom: 20px;
}

.input-field,
.form-group .form-input {
   border: 1px solid #cccccc;
   padding: 5px;
}

Conclusion

SASS class inheritance using @extend promotes code reusability and maintainability. You can import classes from external files using @import and extend them with additional properties. This feature helps in creating modular and organized stylesheets.