Below is the code I am currently working with:
@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;
}
}
}
The intention is to create a table where each row has a dark grey background (defined by $darkGray) unless the row has an option set to --heading. In that case, the row should have a bright background.
Despite my efforts, all rows in my browsers appear to be in the dark color. I even attempted using !important within the option without success.
Any suggestions or insights would be greatly appreciated!
Thank you for your time!
PS: The development setup involves CSStyle and SASS technologies.