Forums

Is this some sort of SCSS "inheritance"?

Permalink
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;
}
 
A3020 replied on at Permalink Reply
A3020
None of this code is necessarily SCSS. It's just plain CSS. You can put it in a SCSS file though, it will work / 'compile'.

'.infoLabel' doesn't inherit from '.appraisal'. It's a child selector. So all children of .appraisal with the .infoLabel class are targeted.

The HTML could look like this:

<div class="appraisal">
<span class="infoLabel"></span>
</div>
stewblack23 replied on at Permalink Reply
stewblack23
Hi Xarzu

A3020 is correct. Your code is just plain css. No inheritance is going on in your example. .infoLabel class is a child of .apprasial class.

If you were you are using scss techniques you could rewrite your sass like this. 

.appraisal {  
    height: 50%;
    padding: 10px;
    background-color: #1d5882;
    border-radius: 3px;
    .infoLabel {
       color: #FFFFFF;
       font-weight: normal;
       min-height: 24px;
     }
     .infoLabel.big {
        font-weight: bold;
        min-height: 30px;
     }
}