Add important to all CSS rules during lessc

[Giwayume]

When creating CSS, I never use the important statement. I always use specificity to define which property wins out.

It would be nice if the less compiler could add !important to all of the rules in the compiled CSS, so the poorly written vendor theme styles I have to deal with in our application do not clash with our application styles.

e.g.

.hidden {
  display: none;
  visibility: hidden;
}

Would become

.hidden {
  display: none !important;
  visibility: hidden !important;
}

Can lessc do this or do I need another tool?

[matthew-dean]

Wrap your rules with a mixin, and call the mixin with !important

.mixin() {
  .hidden {
    display: none;
    visibility: hidden;
  }
}
.mixin() !important;

Output:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

[matthew-dean]

Closing as this is already supported.

[Giwayume]

Thanks.