Enable LESS variables in CSS @import directive

Question

I would like to include a LESS variable in the contents of the string of my @import., Operator.

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

However, there is no conversion in the processed CSS, and it looks simple:

 @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 handled as follows:

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

Is there any solution?

Answer 1

I am in the main command for less.js, variables in @import have been introduced. Less.js v1.4.0-b1

This will allow you to accomplish what you want 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

At this time, you cannot do this in the Less section, but it looks like the function may appear in the near future.

More precisely, its in less.js 1.4 alpha.

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