Use Variable for Import Parameter in less

If you need to parameterize urls that will be used in the @import directive and imported into your .css files use the following.

@googlefonturl: "//fonts.googleapis.com/css?family=Roboto";
@import (css) url("@{googlefonturl}");

Which will generate the following at the top of your css output

@import url("//fonts.googleapis.com/css?family=Roboto");

The double quotes aren’t necessary but less adds them. If you wanted to pull in the remote css to your less use `(inline)` instead of css do this

@import (inline) url("@{googlefonturl}");

It is not recommended to do this with google fonts because the api uses browser sniffing so that it can the correct files for the device requesting fonts

Pass Multiple Variables to lessc Command Line Arguments

In order to pass more than one argument to the lessc compiler you need to use the option argument for each variable, for example

lessc --modify-var="bgColor=purple" --modify-var="bodyColor=aqua" custom.less test.css

Notice the “–modify-var” option being passed twice, this is because there is no separator

https://github.com/less/less.js/issues/731#issuecomment-28477515