Use @import on less passing variable as parameter

0

I'm doing a mixin in less and need to use @import by passing a variable as a 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 the parameter, is there any 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: false,     showProperties: true,     plugin: 'gulp-less'     __safety: {toString: [Function]}}

    
asked by anonymous 18.03.2015 / 15:48

2 answers

1

Using variables interpolation it works:

@import "my_folder/@{theme}";

    
18.03.2015 / 19:30
0

Yes, it is possible. Firstly, 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 send parameters, now you know the application for what you want is valid.

    
18.03.2015 / 15:57