Inheritance in SCSS?

Inheritance in SCSS?

  


Hello Forum.  I have a .scss question.  I don't know if this question belongs here but I thought I would give it a go.  In the following .scss code, is ".infoLable" inheriting from "appraisal"?


.appraisal {
  height: 50%;
  padding: 10px;
  background-color: #1d5882;
  border-radius: 3px;
}

.appraisal .infoLabel {
  color: #FFFFFF;
  font-weight: normal;
  min-height: 24px;
}

.appraisal .infoLabel.big {
  font-weight: bold;
  min-height: 30px;
}


Solution

Hi William,

While you are right that this is not an OutSystems related question, let me help you.

Short answer: No. There is NO inheritance in CSS (and not .scss afaik).
.appraisal .infoLabel is a selector that says the style will be applied to any HTML element that contains the class .infoLabel, inside any element (at any level) that contains the class .appraisal.

Here is a nice resource for starters with CSS: https://www.w3schools.com/css/

Cheers.
Eduardo Jauch

Solution

CSS and SCSS (also called SASS) are two different things. In SCSS there is inheritance, but within some limitations.


In any case, OutSystems hasn't introduced support to SCSS (yet), and the code you've written appears to be CSS and not SCSS.

SCSS are fully compatible with CSS, so the inheritance in SCSS is done with a different syntax.