Inherit a class into another file in Sass

SASS is a preprocessor built on top of CSS to better manipulate CSS code. It contains multiple directives and rules that make writing CSS code easy. It also contains some very useful features such as inheritance, if/else statements, functions, etc.

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

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

grammar

Users can inherit a class into another file in SASS according to the following syntax.

@import "filename";

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

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

Example 1 (Basic class inheritance)

In the following example, we demonstrate basic class inheritance. Here, in the card.scss file, we have added a 'card' class with some CSS properties. We can say that it contains all the basic CSS properties and values ​​we need to create cards.

In the style.scss file, we use the @import directive to import the card.scss file. After that, we styled the 'card-div' and 'card-container' classes. At the same time, we used the @extend rule to inherit the 'card-div' and 'card-container' classes into the 'card' class.

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

File name - 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);
}

File name – 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 following example, we demonstrate inheritance of multiple classes. We added different classes containing CSS properties in the “specs.scss” file. In the style.scss file, we imported the "specs.scss" file. Additionally, we extended all 3 classes of the "specs.scss" file into "div" classes using the @extend directive. So, we inherited multiple classes into one class from another file.

File name - specs.scss

.margin {
   margin-top: 10px;
   margin-left: 10px;
}
.padding {
   padding-top: 10px;
   padding-left: 10px;
}
.size {
   font-size: 20px;
}

File name – 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 following example, we demonstrate nested inheritance. In the form.scss file, we created two different classes and added CSS properties.

In the style.scss file, we inherited the 'form-group' class through the 'form-field' class and added the 'form-input' class. The 'input-field' class inherits the 'form-input' class. So, we used nested inherited classes.

File name - form.scss

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

File name – 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 classes from one file to another in SASS. Users need to import the file containing the class and use the @extend directive class name to inherit from one class to another.

The above is the detailed content of Inherit a class into another file in Sass. For more information, please follow other related articles on the PHP Chinese website!