CSSTYLE - option does not override standard values - css

Question

I have this code:
#include component(elementList) {
tr {
td {
width: 50%;
background: $darkGray;
padding: 5px;
text-align: center;
}
#include option(heading) {
padding: 5px;
background: #eeeeee;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
}
}
It's just a table. And every row should have a dark background (which is saved in $darkGray), except for those rows with an option --heading set. Those should have a bright background.
But in my browsers, all rows are in the dark color. I also tried !important inside of the option.
Any ideas?
Thank you guys
PS: I am using CSStyle with SASS.

Answer 1

Think this is a scoping issue. You use the dark background on table cells, while you're using the bright background on rows. So no matter which option the row has, its contained cells are dark.
This should work (untested and never used CSStyle)
#include component(elementList) {
tr {
td {
width: 50%;
background: $darkGray;
padding: 5px;
text-align: center;
}
#include option(heading) {
td {
padding: 5px;
background: #eeeeee;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
}
}
}