Sass @ extend Directive

Sass @ extend directive provides inheritance features. It can be used to inherit styles from other properties. Let us understand it with the help of an example.

       
 .box-layout{
  padding: 10px 8px;
  background-color: gery;
 }
.message{
@extend .box-layout;
color:black; 
}
   
  

After the transpiling of the above SCSS code, the out CSS code will be:

General Syntax

Try it now

Source Code

          <style type="text/css">
.box-layout, .message {
	padding: 10px 8px;
	background-color:grey;
}
.message {
	color: black;
}
</style>

Try it now

Multiple Extends

You can use multiple @extend directives within a selector.

Multiple Extends

You can use multiple @extend directives within a selector.

       
.box-layout{
  padding: 10px 8px;
  background-color: grey;
 }
.textFont{
	font-size:20px;
}
.message{
  @extend .box-layout;
  #extend .textFont;
   color:black; 
}
   
  

Followings are the output CSS code after the transpiling of the above SCSS code.

General Syntax

Try it now

Source Code

          <style type="text/css">
.box-layout, .message {
	padding: 10px 8px;
	background-color:gery;
}
.textFont, .message {
	font-size: 20px;
}
.message {
	color: black;
}
</style>

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4