Passing Parameters to Media Imports

[leigeber]

I've seen the issues related to external variables in import statements but didn't see anything on parametric variables, sorry if I overlooked or there is no differentiation.

Basically the following throws an error that @filename is undefined using LESS Grunt which uses LESS 1.7. Is this not supported? If not are there any workarounds? An inline import media statement doesn't seem to work either.

.import (@filename) {
    @import '../custom/breakpoints/@{filename}.less';
}

.import('desktop-large');

However the following works so I'm inclined to believe its somewhat related to the external variable issue.

.import () {
    @filename: 'desktop-large';
    @import '../custom/breakpoints/@{filename}.less';
}

.import();

I'm actually trying to do something closer to the following but it doesn't work returning the error "Cannot call method 'variable' of undefined. I thought passing the evaluated filename to an external mixin would solve the problem and that is how I got here.

.breakpoints (@index: 1) when (@index <= length(@breakpoints)) {
    @breakpoint: extract(@breakpoints, @index);

    @filename: ~`@{breakpoint}.split(' ')[0].trim()`;
    @width: ~`@{breakpoint}.split(' ')[1].trim()`;

    @pxWidth: unit((percentage(@width) / 100), px);
    @offsetWidth: (@pxWidth - @responsiveOffset);

    @media (min-width: @offsetWidth) {
        @import '../@{responsivePath}/@{filename}.less';
    }

    .breakpoints((@index + 1));
}

Thanks for the assist!

[SomMeri]

The support for variable interpolation in import is limited. They see only directly defined variables e.g., they do not see parameters or other imported variables.

I think that what you want is tracked either here #1359 or here #410 .

If you use only one file, then @responsivepath variable placed in the root should be visible from everywhere. If you have project split into multiple files, then you might want to vote for #1359.

[leigeber]

Thanks @SomMeri, I had seen those but missed the reference to variables. That said, in the last parameter @responsivepath is in the root and doesn't seem to be a problem and @filename is defined in the scope of the mixin so I had hoped it would be available since I wouldn't have thought it to be external, misunderstood how that term was being used. I'll close this issue for the time being since it appears to be a duplication.