Best way to extend a SASS class with inner selector (subclass) - html

Question

Im styling the following HTML to display messages:
<div className="message">
<div className="message_label">
A message
</div>
</div>
Using the following SCSS class:
.message {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
&_label {
color: #444;
padding: 5px;
}
}
Following BEM, I want to create another modificator version for error messages:
<div className="message--error">
<div className="message_label">
This is an error!
</div>
</div>
This version will just change the previous colors to red so I want to extend the previous 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; // This is not working
}
}
}
But the selector message_label is not working, since its an inner selector and the #extend doesnt affect it, as explained in SCSS Docs. Whats the best way to extend a class including inner selector?
You can check the DEMO here.

Answer 1

The reason this isn't working is because all #extend does is share some css properties across different classes. So in this case, I would expect it to create a selector like:
.message, .message--error {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
}
.message_label {
color: #444;
padding: 5px;
}
.message--error {
border: 3px solid red;
}
.message--error_label {
color: red;
}
You can see at the bottom of the above css how your color: red might actually end up in a style sheet.
Finally, please do not format your scss like this. It would be a nightmare to maintain and understand.
Answer
My suggestion to answer your question is to just use .message and .message--error on the same element, similar to how Bootstrap does things