less / less/less.js

Can’t use @import inside each()

Open
#3,339 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug low priority
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

Have this piece of code that imports component files based on a variable.

@components: {
    columns: true;
    ratios: false;
};

each(@components, {
    & when (@value = true) {
        @import "components/@{key}.less";
    }
});

It errors, with: error evaluating function 'each': variable @key is undefined.

But it is defined, because this works:

// LESS
each(@components, {
    & when (@value = true) {
        .test {
            content: @key;
        }
    }
});

// CSS Output
.test {
    content: columns;
}

It’s not due to the variable being a map, or the usage of a guard, this example using a list creates the same error:

each(@components, {
  @import "components/@{value}.less";
});

Is there an alternative way to achieve this?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file or test is named. Reproduce the map and list examples in the Less compiler, then trace how each() bindings are handled when an @import path is evaluated. Done means the reported behavior has a regression test and the supported outcome is clear.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
compilers
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.