Less CSS Variable Not Working

Using CSS variables in LESS

LESS allows you to use normal CSS code, so use one option could be just use the variable as CSS:

@import "../variables.css";
.header {
   color: var(--header-color);
}

Also, you can save the css var to a LESS var:

@import "../variables.css";
@header-color: var(--header-color);

.header {
   color: @header-color;
}

Less CSS fade function not working with variable

It fails to compile because the @accentColor variable seems to contain a String and not a Color as its value. The fade() function only works on color values.

To fix the problem, convert the String into the Color value by using the color() function.

background-color: fade(color(@accentColor), 12%);

The value is being considered as a String because of the below interpolation statement. The e() or the ~"value" function outputs a String.

@accentColor: ~"@{accent@{color}}";

As pointed out by seven-phases-max in his comment, the below approach would also avoid the need for the color() function.

.AccentPalette(@palette; @color:500) {
  .Swatch(@palette); 
  @accentColor: "accent@{color}"; /* note the change, we are just concatenating and not evaluating */
  @accent500:  @500;

  &::after {
    background-color: fade(@@accentColor, 12%); /* actual evaluation happens here */
    border-radius:0.2rem;
    height:100%;
    top:0;
    z-index:-1;
  }  
}

Can I put Less variables inside custom CSS variables?

Short answer is yes, you can.

Now for the correct answer: you shouldn't (unless you're gonna use their additional power and set the fallbacks)

LESS variables are supported by all browsers, as they compile to regular CSS. CSS vars are not supported by some browsers, most notably IE (and never will).

So the change doesn't really make any sense if you are gonna use it as you would use regular variables.

But CSS variables are much more than that. They can be changed at runtime with javascript, they provide DOM tree scopes so makes for extremely awesome modifiers, and can provide a much better user experience when used as progressive enhancement.

Just remember that you totally have to set a fallback for them so IE don't get completely empty declarations.

So all in all, you probably want to keep your LESS variables, use them as the default value in your CSS variables, and set a proper fallback for them.

LESS CSS - &:focus not working in variable selector

You can try with:

.text-inputs() {
    input[type=text], input[type=password],input[type=email], input[type=number]{        
        .text-inputs-properties();
    }
}

@shade: rgba(0, 0, 0, 0.1);

.highlight {
    background: @shade;
}

.input-highlight {
    .text-inputs();
    .text-inputs-properties() {       
        .highlight;
    }  
}

.input-highlight-subtle {
    .text-inputs();
    .text-inputs-properties() {
        &:hover{
            .highlight;
        }
    }      
}

Credits for @seven-phases-max for his answer Focused selector in variable . How to do that stuff in LESS like in SCSS

I have just adapted it to your case, Here you have it working on this FIDDLE example, I hope this helps

EDIT1: I found this @scottgit comment and I thought it should also be considered

" there is a work around to get the functionality of assigning properties to a set of selectors defined in a variable using the capabilities of LESS 1.7. Consider this:"

//I modified the code a litter bit for your case   

@shade: rgba(0, 0, 0, 0.1);

@inputs: {input[type=text], input[type=email], input[type=password], input[type=number] {.getProps()}};
@pseudo: ~':hover';
@props: { background: @shade;};

.input-highlight-subtle{
    .setProps(@selectors; @props; @extension: ~'') {
        @selectors();
        .getProps() {
            &@{extension} { @props(); }
        }
    } 

    .setProps(@inputs; @props; @pseudo);
}

"So I can assign a pseudo class if I want or not, and pass a set of properties as needed. The key is to put the mixin .getProps() call into the block that is defining the selectors for variable @inputs, which is then called as a local mixin inside .setProps() so that the properties get put where we want them. The @extension could be any escaped string to add to each selector as an additional part of the selector string. Above I do :focus as a pseudo class, but I could have done ~' > div + div' as a child and sibling combination, or whatever."

and here the jsfiddle example

Is it possible to manipulate css variables using LESS?

As mentioned in my comment, my understanding of CSS variables is that the variable is resolved into its actual value by the UA. This happens after the Less compiler compiles the file and thus it wouldn't be aware of what is the actual value contained by the CSS variable.

To the compiler, the value of @length is only var(--length). Since this is not a number, an error is thrown during compilation indicating that the math operation is being done on an invalid type.

OperationError: Operation on an invalid type on line 4, column 3:

One way to fix this would be to make the Less compiler output the variable name as it is and have the multiplier appended to it (like string concatenation). This would then leave the control to the UA.

But since all CSS math operations have to be given within calc() function, the entire thing has to be wrapped within it. So, the below code would work fine.

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: ~"calc(@{length} * 2)";
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

Or, even the below would be enough if --strict-math is enabled during compilation:

h1 {
  --length: 40px;
  @length: var(--length);
  @length2: calc(@length * 2);
  line-height: @length;
  padding: @length2;
  border: 5px solid tomato;
}

Above code when compiled produces an output similar to the one in Example 11 of the specs and so it should be a reasonably good way of doing this :)

... Note, though, that calc() can be used to validly achieve the same thing, like so:
.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}
var() functions are substituted at computed-value time...

How to declare a variable as !important with LESS?

I think your declaration of @fontColor: #000000 !important; indeed make no sense, what do you assign? a string, a list of something?
Most reasonable it a string, which should quoted and indeed escaped when used:

For that reason the following code seems correct (for 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;
}

The compiler (Less v2) does not throw a error in both cases. But in the second case !important is not compiled in the CSS code. Also red !noncolor compiles into the CSS code. Probably !important is some kind of keyword, but for me it seems an inconsequence in the compiler for now.

Also notice that the docs describe how to use !important with mixins at http://lesscss.org/features/#mixins-feature-the-important-keyword