less Mixins Add !important to every property in a mixin without manually typing it


When we attach the !important keyword to a mixin call, the Less compiler will automatically add the !important to all properties that are present within the mixin.

For example, consider the below mixin:

.set-default-props() {
  margin: 4px;
  padding: 4px;
  border: 1px solid black;
  font-weight: normal;

When the !important is attached to the mixin call like below,

#demo {
  .set-default-props() !important;

the compiled CSS would look as follows:

#demo {
  margin: 4px !important;
  padding: 4px !important;
  border: 1px solid black !important;
  font-weight: normal !important;

Note: Usage of !important is considered as bad practice and must be used only as the last resort.