Welcome Guest! (App Version 3.1)

websitnero logo name

Sass Inheritance

Inheritance via @extend

Using @extend you can inherit the properties of any other id, class, element, etc. Pure CSS does not have any such functionality or keyword via which you can simply inherit the styling of some other element, but Sass allows you to do so easily.

The compiled code in CSS will have all the properties & values of original class or element mapped right inside it. This way it gets easier to reduce the overall code and effort required to write CSS and removes the repetitive effort in writing same set of code again and again.

Look at the example below:

main.scss:

div {background: red;}
.para1 {color: blue;}
#section1 {border: 3px solid brown;}
span {@extend div; @extend .para1; @extend #section1;}

main.css (compiled):

div, span {
  background: red;
}
.para1, span {
  color: blue;
}
#section1, span {
  border: 3px solid brown;
}

index.html:

This is a div.

This is a paragraph.

This is a section.
This is a span.
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.