import - 动态构建更少的@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 测试版中工作。

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

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

Answer 2

我已经为这两个版本制定了一个要点 https://gist.github.com/line-o/5568723

Answer 3

一个定义字体集的工作示例：（使用 Less v1.7.3）

// Google font import mixin
.gFontImport (@name; @weights: 400; @subsets: latin) {
    @nameEsc: ~`"@{name}".replace(/'([^']+)'/,'$1').replace(' ', '+')`;
    @import url('http://fonts.googleapis.com/css?family=@{nameEsc}:@{weights}&subset=@{subsets}');
}


// Font sets
// The variable @post-fontset is dynamic (user input)
// ------------------

// foo1
.font(@fontset) when (@fontset = foo1){
    .gFontImport('Roboto');
    .gFontImport('Lato');
}
.font-text() when (@post-fontset = foo1){
    font-family:Lato;
}
.font-headings() when (@post-fontset = foo1){
    font-family:Lato;
}
.font-sitetitle() when (@post-fontset = foo1){
    font-family:Roboto;
}

// foo2
.font(@fontset) when (@fontset = foo2){
    .gFontImport('Oswald');
    .gFontImport('Lato');
    .gFontImport('Roboto Slab');
}
.font-text() when (@post-fontset = foo2){
    font-family:'Roboto Slab';
}
.font-headings() when (@post-fontset = foo2){
    font-family:Lato;
}
.font-sitetitle() when (@post-fontset = foo2){
    font-family:Oswald;
}


// Using the mixins in the CSS
// ------------------

// This executes the font import mixin
.font(@post-fontset);

// Site title
h1{.font-sitetitle();}

// Heading
h2, h3, h4, h5, h6{.font-headings();}

// Text
body{.font-text();}