Clever Geek Handbook

How to declare a variable like! Important with LESS?

Is it possible to have a variable declared as !important

with LESS? I am currently getting a syntax error with the following.

For example:

@fontColor: #000000 !important;

p {
    color: @fontColor;
}

Should display as:

p {
    color: #000000 !important;
}

I know there is a way to avoid being mentioned HERE using the following:

@fontColor: #000000 ~'!important';

There was talk of implementing it as simple syntax as recently as my first example, just not sure what they ever did - https://github.com/less/less.js/issues/1401

Using Visual Studio 2013 Update 4

+3


source to share


3 answers


I think your ad @fontColor: #000000 !important;

doesn't really make sense, what are you assigning? string, list of something? Most sensibly is a string that needs to be quoted and actually escaped when used:

For this reason, the following code seems to be correct (to me)

@fontColor: "#000000 !important";

p {
    color: ~"@{fontColor}";
}

I also found that the following code:

@wrong: red noncolor;
selector {
property: @wrong;
}

@wrongtoo: red !important;
selector {
propertytoo: @wrongtoo;
}


output:

selector {
  property: red noncolor;
}
selector {
  propertytoo: red;
}

In both cases, the compiler (Less v2) does not generate an error. But in the second case, it !important

doesn't compile in CSS code. Also red !noncolor

compiles to CSS code. It's probably !important

some kind of keyword, but it looks like an inconsistency in the compiler to me .

Also note that the docs describe how to use !important

with mixins at http://lesscss.org/features/#mixins-feature-the-important-keyword

+3


source


the accepted answer didn't work for me (I guess it was because of the version, maybe).

That the workaround mentioned in the OP's question itself worked that I didn't see at the beginning.

If this happens to someone else, try this:



// !important doesn't work
@fontColor: #000000 !important;

// !important works!
@fontColor: #000000 ~'!important';

Source

+4


source


The right way

@fontColor: "#000000 ";

p {
    color: @fontColor !important;
}
-2


source






More articles:


All Articles