CODEWITHSUNDEEP
cssless
chovy
chovy

Reputation: 75656

Can I override a less-css function based on a class?

For example my html tag has the class ie9. I want to define a default function and override its definition when the ie9 class exists:

.word-break(){
    word-break: break-word;
}

.ie9 {
    .word-break(){
        word-break: break-all;
    }
}


div > p {
    .word-break();
}

This however does not work as intended. Nothing happens in IE9.

Upvotes: 0

Views: 677

Answers (1)

SLaks
SLaks

Reputation: 887285

You need to put the selector inside the mixin:

.word-break() {
    .ie9 & {
        word-break: break-all;
    }
}

The & represents the selector you're invoking the mixin inside of.

If you simply write .ie9 {, it will generate div > p .ie9, which is probably not what you want.
Putting the & last moves the original selector later.

Upvotes: 3

Related Questions