将两个字符串加在一起 node-sass答案

【问题标题】：Adding two string together node-sass将两个字符串加在一起 node-sass
【发布时间】：2014-03-04 14:36:11
【问题描述】：

我正在尝试创建一个名为 getFont 的 mixin 来简化 @font-face 调用。使用指南针和 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;
  }
}

这给了我使用指南针所需的结果，但是在使用 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; }

看起来编译器在将两个字符串相加时遇到了一些问题？

【问题讨论】：

标签： css fonts gruntjs node-sass

【解决方案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 模式中运行它：http://jsfiddle.net/NicoO/LKJK6/2/ 以查看 CSS 结果（规则被破坏）

【讨论】：

是的，这就是我最终弄清楚的。刚回来更新问题！