将两个字符串添加到node-sass中

时间:2014-03-04 14:36:12

标签: css fonts gruntjs node-sass

我正在尝试创建一个名为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; }

看起来编译器在将两个字符串放在一起时遇到了一些麻烦?

1 个答案:

答案 0 :(得分:1)

我没有使用过grunt oder 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;
  }
}

这是一个小提琴,字体破碎。你需要在/ draft modus:http://jsfiddle.net/NicoO/LKJK6/2/中运行它来查看CSS结果(规则被破坏)