Include LESS Variables in CSS @import Directive

Question

I would like to include a LESS variable inside the string content of my @import statement . . .

@my-font-name: Georgia;
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|@{my-font-name}:400,300,700";

However, in the processed CSS, there is no transformation and it just looks the same:

@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|@{my-font-name}:400,300,700";

where I would prefer it to be processed like this:

@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Georgia:400,300,700";

Is there any solution?

Answer 1

I'm on the core team for less.js, variables in @import statements was introduced in . Less.js v1.4.0-b1

This should allow you to accomplish what you're looking to do:

@my-font-name: Georgia;
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|@{my-font-name}:400,300,700";

Answer 2

You cannot currently do this in Less, however it does look like the feature maybe coming soon.

More precisely its in less.js 1.4 alpha.

https://github.com/cloudhead/less.js/issues/410