CODEWITHSUNDEEP
csslesscss-specificity
Asim K T
Asim K T

Reputation: 18144

More precedence/specificity to CSS class in LESS

I've a LESS code like: 

.block__element {
  background: red;
  &--modifier {
    background: yellow;
  }
}

I want more specificity to .block__element--modifier such as:

.block__element.block__element--modifier {
  background: yellow:
}

So that it can overrides some other styles. I can achieve it by:

.block__element {
  background: red;
  &--modifier.block__element {
    background: yellow;
  }
}

I want to know is there any easy way?

Upvotes: 0

Views: 1144

Answers (2)

Asim K T
Asim K T

Reputation: 18144

.block__element {
    background: red;
    &&--modifier {
        background: yellow;
    }
}

link

Upvotes: 0

wisd81
wisd81

Reputation: 128

You could achieve it in a more fancy way using variable interpolation, so that every time you need to increase the specificity of a class/modifier you can use it. It seems weird at first, but when you'll get used to it you will love it and your code will look much more clean and easy to read.

Check the official documentation

.block__element {
    @this: block__element;
    background: red;

    &.@{this}--modifier-primary {
        background: yellow;
    }

    &.@{this}--modifier-secondary {
        background: green;
    }

    &.@{this}--modifier-tertiary {
        background: green;
    }
}

Upvotes: 1

Related Questions