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

Users can follow the syntax below to inherit a class to another file in SASS.

@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.

In the output, we can observe the result of the inherited class. Also, users can observe the code reusability in the below example.

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;
}

Output

.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 the example below, we have demonstrated the 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. Also, we used the @extend directive to extend all 3 classes of the ‘specs.scss’ file into the ‘div’ class. So, we have inherited multiple classes from another file into a single 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;
}

Output

.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 the example below, we have demonstrated the nested inheritance. In the form.scss file, we created two different classes and added CSS properties.

In style.scss file, we inherited the ‘form-group’ class via the ‘form-field’ class and added the ‘form-input’ class. The ‘input-field’ class inherits the ‘form-input’ class. So, we have used nested inheritance with classes.

Filename – form.scss

// form.scss
.form-field {
   margin-bottom: 20px;
}
input-field {
   border: 1px solid #cccccc;
   padding: 5px;
}

Filename – style.scss

@import 'fonts';

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

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

Output

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

Users learned to inherit the classes from one file to another file in SASS. Users need to import the file containing the class and use the @extend directive class name to inherit one class from another class.