Use @import in Less by passing variable as parameter

Asked

Viewed 57 times

0

I’m making a mixin in Less and need to use @import passing a variable as parameter.

Example:

change-Theme.Less

.change-theme(@theme) {
    @import @theme;
    // Another code goes here
}

Theme.Less

@import "change-theme";
.theme-black {
    .change-theme("variables/my_black_theme");
}
.theme-green {
    .change-theme("variables/my_green_theme");
}

It does not accept variable in parameter, there is some way to do this?

Error:

{ [Error: malformed import statement in file change-Theme.Less line no. 6] type: 'Syntax', filename: 'change-Theme.Less', index: 124, line: 6, callLine: Nan, callExtract: Undefined, column: 2, Extract: [ ', ' @import @Theme;', '' ], message: 'malformed import statement in file change-Theme.Less line no. 6', stack: Undefined, lineNumber: 6, filename: 'change-Theme.Less', name: 'Error', showStack: a false, showProperties: true, plugin: 'Gulp-Less', __Safety: { toString: [Function] } }

2 answers

1


Using variables Interpolation it Works:

@import "my_folder/@{theme}";

  • Tag as response ^^.

0

Yes, it is possible. First of all, I think it would be nice if you put a default value for this parameter. An example of this application:

.margin(@top: 4px; @left: 4px; @bottom: 4px;  @right: 4px;) {
    margin: @arguments;
}

a {
  .margin(10px, 5px, 5px, 20px);
}

You can do the sending of parameters, now is to know the application of this for what you want is valid.

  • This way I managed to make it work, but when I use the @import, gives syntax error, I will update the question.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.