动态生成较少的@import url

在处理GoogleWebFont导入时，我注意到动态构建@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}”

它似乎在1.4测试版中工作

1.4 在LESS中做类似的事情（我在中尝试过）：

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

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

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

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

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

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

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

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

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

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

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

---

---

我已经为两个版本的混音器做了一个要点

---

定义字体集的工作示例： （版本1.7.3以下）

---

遗憾的是，好的版本给了我

@import-url（'http://fonts.googleapis.com/css?family=@{name}:@{weights}&subset=@{subsets}'）即使在less2css.org中，上述解决方案也无法正确呈现！后者确实有效。谢谢你的帮助！另一方面，您希望web字体的@import位于编译的CSS文件的最开头。将其注入选择器会破坏这种优化。现在它结束在代码中间，浏览器稍后会开始下载字体。我编辑了答案…它在less2css上对我的LESS 1.4起作用，但是我有点盲目，当更改版本=）它取决于你使用的LESS的版本。这个很好的解决方案从1.4开始工作。非常感谢@MartinCool，我现在才查出来，谢谢分享+从我这里得到1^_^