动态构建更少的@import url

Question

在使用google webfont import mixin时，我注意到无法动态构建@import URL。

.gFontImport (@name, @weights, @subsets) {
    @url: "http://fonts.googleapis.com/css?family=@{name}:@{weights}&subset=@{subsets}";
    @import url(@url);
}

可以缩小到

@url: "http://localhost/test.css";
@import url(@url);

这些附加测试均无效：

@import url("@{url}"); // this one renders at least

@import url(~"@{url}");

当编译器呈现CSS文件时，@ import URL始终保持不变，例如 "@{url}"

Answer 1

它似乎可以在1.4 beta中使用。

1.4

在LESS中做这样的事情（我在less2css.org尝试过）：

.gFontImport (@name, @weights, @subsets) {
    @import url('http://fonts.googleapis.com/css?family=@{name}:@{weights}&subset=@{subsets}');
}

.gFontImport("Roboto+Slab",400,latin);

在CSS中将具有预期的输出：

@import url('http://fonts.googleapis.com/css?family=Roboto+Slab:400&subset=latin');

<= 1.3.3

如果对您不起作用，则可以使用一种解决方法，将@import呼叫注入选择器名称：

.gFontImport (@name, @weights, @subsets) {
    @gimport: ~"@import url('http://fonts.googleapis.com/css?family=@{name}:@{weights}&subset=@{subsets}');";
    @{gimport} some-selector {/* */};
}

所以在LESS中调用类似这样的内容：

.gFontImport("Roboto+Slab",400,latin);

将在CSS中输出：

@import url('http://fonts.googleapis.com/css?family=Roboto+Slab:400&subset=latin');
some-selector {
  /**/
}

这行得通，但是有点混乱。在LESS的JavaScript实现中，您可以使用

`'\n'`

和

`'\t'`

在字符串插值中使其看起来更整洁。