Sending '!important' as an argument results in a syntax error.

[marioestrada]

Having:

.box_shadow (@properties: 0) {
    -moz-box-shadow: @properties;
    -webkit-box-shadow: @properties;
    box-shadow: @properties;
}

Results on an error when trying to call it as:

.box_shadow(none !important);

This used to work on Less 1.2

[reefdog]

+1 for this feature, or some equivalent.

[matthew-dean]

Have you tried:

.box_shadow(~"none !important");

I've used this hack when doing comma-separated values sent to a single variable, like so:

.box_shadow(~"none, none");

[reefdog]

Clever, and useful in some cases, but not where the variable isn't inserted at the end of a property declaration, such as with gradient-generating mixins.

[matthew-dean]

Really? I can't think of a scenario where this syntax wouldn't work. Can you give an example?

[reefdog]

Sure. Look, for example, at this (truncated) gradient generating mixin from Bootstrap:

#gradient {
    .horizontal (@startColor: #555, @endColor: #333) {
        background-color: @endColor;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor));
    }
}

Called as #gradient > .horizontal(#F00, ~"#00F !important"); would work on background-color, but fail on background-image, since it would get inserted into the color-stop parenthetical.

[reefdog]

It just now strikes me that you may have been simply trying to solve @marioestrada's problem, in which case good on yah. I was thinking more about the generic usefulness of this feature, and for gradient mixins specifically.

[reefdog]

More generic solution added as #547. Then this could be called as .box-shadow(none) !important;.

[matthew-dean]

I still don't really understand. The syntax can be used to pass in the value as is and avoid parsing errors with special values.

I don't see how your example fails on background-image. In your example, these are (roughly) equivalent:

#gradient > .horizontal(#F00, ~"#00F");
#gradient > .horizontal(#F00, #00F);

The only difference seems to be that the color value in the second line is translated into a six-digit value, which I didn't know. But in your example, either way would be valid.

[reefdog]

I know, sorry. My first example had a typo (fixed now). I meant #gradient > .horizontal(#F00, ~"#00F !important");. That fails, right?

[matthew-dean]

Oh, I see, it's not the parser that fails, it's how you've defined the variables. Try this out:

#gradient2 {
    .horizontal (@startColor: #555, @endColor: #333, @important: ~"") {
        background-color: @endColor @important;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)) @important;
    }
}
.test {
#gradient2 > .horizontal(#F00, #00F, ~"!important");
}

Looks crazy, but seems to work. ^_^

[matthew-dean]

Note that I agree with you that it is a bug that !important does seem to fail without the escaped quote syntax, but at least there's a temporary workaround.

[reefdog]

Hehe, thanks for that solution, but that would get very messy if implemented across an entire library. It would be better if this was built into the parser. (I'm not saying @cloudhead has any obligation to, just saying it would be the Wrong Solution to leave optional room for !important sprinkled all over our libraries/codebases.) Thanks anyway.

[matthew-dean]

Hmmmm.... If your mixin had 14 lines of CSS, would you then expect every line to be appended with !important?

I rarely use the !important keyword, and generally instruct CSS newbies to avoid it for a few reasons, so I hadn't really thought about this scenario.

[reefdog]

Response in #547: #547 (comment)

[lukeapage]

implemented! see #547