When it comes to styling HTML to display messages, here's what I have:
<div className="message">
<div className="message_label">
A message
</div>
</div>
To style these messages, I am using the SCSS class below:
.message {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
&_label {
color: #444;
padding: 5px;
}
}
Following BEM methodology, I want to create a modified version for error messages:
<div className="message--error">
<div className="message_label">
This is an error!
</div>
</div>
In this error version, I simply need to change the colors to red, so I need to extend the existing SCSS class:
.message {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
&_label {
color: #444;
padding: 5px;
}
&--error {
@extend .message;
border: 3px solid red;
&_label {
color: red; // However, this is not working
}
}
}
The issue lies with the selector message_label because it is an inner selector and the @extend doesn't affect it as per the SCSS Docs. What would be the best approach to extending a class that includes an inner selector?
You can view the DEMO here.