CODEWITHSUNDEEP
cssnestedless
user2189814
user2189814

Reputation: 21

How to alter my css less code without !important

I have something like this:

table {
thead {
    th{
        background-color: @grey-1;
        ...
    }
}
position: relative;
&.option1 {
    thead {
        th {
            background - color: @grey-2;
            ...
        }
    }
} 
&.option2 {
    thead {
        th {
           background - color: @grey-3;
           ...
        }
    }
}
&.option3 {
    thead {
        th {
            background - color: @grey-4;
            ...
        }
    }
}}

I have another class to insert:

.clean {background-color: transparent;}

And my point is to make this table to have a transparent th background:

<table class = "option1 clean"> </table>

Briefly, I need to alter my less file by inserting .clean class so that "table .option1 .clean" would have a transparent background. It has to be done without inserting .clean into every .optionX class and adding !important.

Any options?

Thanks a lot!

Upvotes: 2

Views: 53

Answers (1)

Artless
Artless

Reputation: 4568

Just add a rule for .clean below the options (under table, not inside each individual option):

table {
    &.optionX {
        ...
    }

    &.clean {
        thead {
            th {
                background-color: transparent;
            }
        }
    }
}

Upvotes: 1

Related Questions