Selector Inheritance
While CSS3 supports the Document Object Model (DOM) hierarchy, it does not allow selector inheritance. Inheritance is done by inserting a line inside of a code block that uses the @extend keyword and references another selector. The extended selector's attributes are applied to the calling selector.
.error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; }Would compile to:
.error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; }Sass supports multiple inheritance.
Read more about this topic: Sass (stylesheet Language)
Famous quotes containing the word inheritance:
“A child is born with the potential ability to learn Chinese or Swahili, play a kazoo, climb a tree, make a strudel or a birdhouse, take pleasure in finding the coordinates of a star. Genetic inheritance determines a child’s abilities and weaknesses. But those who raise a child call forth from that matrix the traits and talents they consider important.”
—Emilie Buchwald (20th century)