1

getFont呼び出しを簡素化するという名前の mixin を作成しようとしてい@font-faceます。コンパスとサスで私はこれを行います：

@mixin getFont($name, $url){
  @font-face {
    font-family: $name;
    src: url($url+".eot");
    src: url($url+".eot?#iefix") format("embedded-opentype"), 
      url($url+".woff") format("woff"), 
      url($url+".ttf") format("truetype"), 
      url($url+".svg#") format("svg");
    font-weight: normal;
    font-style: normal;
  }
}

これにより、コンパスを使用して望ましい結果が得られますが、grunt と node-sass を使用すると、次のようになります。

@font-face {
  font-family: 'font-name';
  src: url($url+".eot");
  src: url($url+".eot?#iefix") format("embedded-opentype"), url($url+".woff") format("woff"), url($url+".ttf") format("truetype"), url($url+".svg#") format("svg");
  font-weight: normal;
  font-style: normal; }

コンパイラが 2 つの文字列を一緒に追加する際に問題が発生しているように見えますか?

4

1 に答える 1

1

私は grunt または node-sass を使用していないので、テストを行う必要があります。これは、あなたの試みのように、コンパスで機能します。おそらく、これは他のシステムでも望ましい結果につながるでしょう。

@mixin getFont($name, $url){
  @font-face {
    font-family: $name;
    src: url(#{$url}.eot);
    src: url(#{$url}.eot?#iefix) format("embedded-opentype"),
    url(#{$url}.woff) format("woff"),
    url(#{$url}.ttf) format("truetype"),
    url(#{$url}.svg#) format("svg");
    font-weight: normal;
    font-style: normal;
  }
}

これは、壊れたフォントのフィドルです。CSS の結果を確認するには、/draft modus: http://jsfiddle.net/NicoO/LKJK6/2/でこれを実行する必要があります(ルールが壊れています) 。

于 2014-03-04T15:05:27.313 に答える