Question

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

.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}"

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');

＆LT = 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

我已经为两个版本的mixin工作提出了要点 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();}

动态构建更少的@import url

3 个答案:

1.4

＆LT = 1.3.3