import - 动态构建 less @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 调用注入(inject)选择器名称的变通方法:

.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'`

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