Variable Name Error “is undefined” even though “variables.less” imported

Question

I started using LESS today. But it\'s kinda weird. This code does not work. I get an error:

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

Answer 1

One other weirdly specific situation in which this occurs: if you're using .NET and dotless, the compiler will choke on nested media queries with variable specifiers. If you have code like this:

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

        @media (min-width: @anotherVariable) {
            margin: 20px;
        }
}

... then dotless will tell you that it can't find the definition for @anotherVariable, even if it's used three lines above.

Answer 2

You can also get this error if you are trying to import the file twice (not a good idea) and the first import is before your variables referenced in your.less file have been loaded

Note: I'm using django compress

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 3

There may be another possible root cause.

Here is my original Gruntfile.js:

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

The wildcard makes LESS compiler compile all .less files under that folder and merge all results into one CSS. And I got errors running grunt less:compile:

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

Once I changed 'less/**/*.less' into 'less/css.less', the compilation succeeds.

Answer 4

This error can also occur via bad imports in the files you're importing.

I also encountered this issue, when using multiple layers of import, and the 'lessc' compiler from Node.js:

• The original file imported a file (which we will call 'child')
• The child file imported a file (which we will call 'grandchild')
• The grandchild was imported

I attempted to compile the original file, and received the same 'undefined variable' behavior. I could see the variable was defined in the child and the syntax lookedcorrect.

No prior errors were displayed.

The problem turned out that the child was not importing the grandchild properly. Ie,

@import grandchild.less

rather than:

@import "grandchild.less";

Fixing the child importing the grandchild made the original see the variables defined in the child.

This seems like a bug in less - ie, the bad import should show up in the 'lessc' output, so one day it will probably be fixed. Until then, I hope this helps.

Answer 5

I encountered the same problem using Winless compiler.

Some of the .less files i was importing into master.less were empty. when i removed these from the list of imported files my variables were recognized!

Answer 6

To help any others that may come across this not want duplicate CSS generated from multiple imports, you have two options.

1. Either @import-once the variables / mixins files you need in each file you need to use them in.

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

2. Upgrade to LESS > 1.4.0, when it arrives; From the less website:

   "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."