Variable name error "undefined", although imported .less variables

Question

I started using LESS today. But this is strange. This code does not work. I get an error message:

! Variable Name Error: @linkColor in a is undefined. 

My loading tray:

 @import "variables.less"; @import "normalize.less"; 

variables.less:

 @linkColor: #08c; @linkColorHover: darken(@linkColor, 15%); 

normalize.less:

 a { color: @linkColor; } a:visited { color: @linkColor; } a:hover { color: @linkColorHover; } 

When i do

@import "variables.less"

everything works fine in normalize.less file.

Thanks for your help:)

Answer 1

This other question ultimately led me to the correct answer.

It seems that the LESS compiler does not work if the files are encoded using the specification. (This is "Byte Estimation" for those who are not familiar with this term.) This is the default value for some editors such as Visual Studio.

The compiler displays an error in the specification if it is in your root file, but does not seem to work for @ imported files.

Try saving your files as UTF-8 without specification and see if your problem solves.

Answer 2

Perhaps there is another possible reason.

Here is my original Gruntfile.js:

 less: { compile: { files: { 'css/less.css': 'less/**/*.less' } } }, 

The wildcard makes the LESS compiler compile all .less files under this folder and combine all the results into one CSS. And I got grunt less:compile errors:

NameError: .transition undefined in less / core / html.less on line 38, column 3

Once I changed 'less/**/*.less' to 'less/css.less' , compilation will complete successfully.

Answer 3

I ran into the same problem using the Winless compiler.

Some of the .less files that I imported into master.less were empty. when I removed them from the list of imported files, my variables were recognized!

Answer 4

This error can also occur as a result of incorrect import in the files you import.

I also ran into this problem when using multiple import levels and the 'lessc' compiler from Node.js:

• The original file imported the file (which we will call the "child")
• The child file imported the file (which we will call the "grandson")
• Grandson was imported

I tried to compile the source file and got the same undefined variable behavior. I could see that the variable was defined in the child, and the syntax looked correct.

There were no errors.

The problem was that the child did not import the grandson properly. Those.,

 @import grandchild.less 

but not:

 @import "grandchild.less"; 

Committing the grandson's child property made the source file available to the variables defined in the child element.

It seems that the error is less - i.e. a bad import should appear on the output of "lessc", so one day it will probably be fixed. Until then, I hope this helps.

Answer 5

To help anyone else who might run into this, don’t need to duplicate CSS created from multiple imports, you have two options.

• Or @import - as soon as the variable files / mixins you need in each file in which you should use them.

  Use @import-once "filename.less"; to prevent duplication.

• Go to LESS> 1.4.0 when it arrives; From less site:

  "The statement @import acts differently before and after 1.4.0. It acts as @import-multiple in all older versions and as @import-once in all less.js versions after 1.4.0."

Answer 6

You can also get this error if you try to import a file twice (not a good idea), and the first import - before your variables specified in your.less file are loaded

Note. I am using django compression

in index.html I had:

 {% compress css %} <link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less"> <link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less"> {% endcompress %} 

then in styles.less i had

 ... @import "timepick.less"; 

Answer 7

I think this is because of which smaller master file you compile. Similarly

If you have Less / Project_name / project.less in this project too. If you import a variable less and all other files that are in the directory.

You just need to compile project.less into your css, and not all fewer files. If you try to compile project.less and variables.less, you will have this error. And you can avoid excessive variable import declaration of fewer files

Answer 8

I would use nested rules in normalize.less:

 a { color: @linkColor; &:visited {color: @linkColor;} &:hover {color: @linkColorHover;} } 

And in @import you don't need to use ".less", optional:

 @import "variables"; @import "normalize"; 

I do not know if this will help ...

Answer 9

Another strange specific situation in which this occurs: if you use .NET and losslessly, the compiler will suppress nested media queries using variable specifiers. If you have a code like this:

 @media (min-width: @aVariable) { .some-class{ margin: 10px; @media (min-width: @anotherVariable) { margin: 20px; } } 

... then the unceremonious will tell you that he cannot find a definition for @anotherVariable, even if he used the three lines above.

Answer 10

For me, this happened when using @ Import-once and nothing helped. but it worked with @Import.

as I read in the latest version of Less Imports, it will work as Import Once.