"!important" applied to mixins is inconsistent

[robertmarsal]

Hello,

First of all thank you for this library :)

I have noticed a strange behaviour when using !important on a mixin.

For example, the following less:

.test {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
}
.another {
  color: blue;
  .test() !important;
}

generates the css:

.test {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
}
.another {
  color: blue;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
}

As we can see no !important statements have been applied to the contents
of the mixin.

If we change the less (sans-serif has been added to the font-family declaration):

.test {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
}
.another {
  color: blue;
  .test() !important;
}

we now get:

.test {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
}
.another {
  color: blue;
  font-family: Arial, sans-serif !important;
  font-size: 15px;
  font-weight: bold;
}

!important is applied to the font-family declaration.

From what I have been testing the !important statement is only applied when the css declaration has multiple words like Aria, sans-serif or 1px solid blue, and only to the first statement of the mixin.

When applied to a mixin, the !important statment should be applied to all the declarations inside, as in the official library: http://goo.gl/kM81gj

So the end result should look like:

.test {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
}
.another {
  color: blue;
  font-family: Arial !important;
  font-size: 15px !important;
  font-weight: bold !important;
}

Thank you,
Rob

[milonas115]

!important rules for any LESS statements inside media queries do not work.

[jesserosenfield]

.opacity(@opacity, @important: ~'') {
    -moz-opacity: @opacity @important;
    -khtml-opacity: @opacity @important;
    -webkit-opacity: @opacity @important;
    opacity: @opacity @important;
}

Declaring a mixin like the above results in an error when using like:

.class-name {
    .opacity(.4, !important);
}

Fatal error: Uncaught Less_Exception_Parser: Expected ')' got '!' in layout.less on line 1502, column 1