2

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

4

3 に答える 3

5

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

文字列補間で少し整然とした外観にします。

于 2013-05-13T13:11:21.380 に答える
1

両方のバージョンで動作するミックスインで要点を作成しました https://gist.github.com/line-o/5568723

于 2013-05-13T14:33:54.437 に答える
1

フォントセットを定義する実際の例: (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();}
于 2014-07-24T11:56:52.897 に答える