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?

jonschlinkert · Accepted Answer · 2013-03-17 18:34:15Z

8

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";

answered Mar 17, 2013 at 18:34

jonschlinkert

11k4 gold badges45 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lol why would this get down-voted? I'm passing on info that we just released this feature. Silly SASS fans.

+1 worked great, but what if I add more than one google font? how would the syntax be?

JohnC · Accepted Answer · 2013-03-14 15:54:56Z

1

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.

answered Mar 14, 2013 at 15:54

JohnC

1,38712 silver badges35 bronze badges