我正在尝试创建一个名为 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; }
看起来编译器在将两个字符串加在一起时遇到了一些问题?
最佳答案
我没有使用 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;
}
}
这是一个 fiddle ,字体坏了。您需要以/draft 方式运行它:http://jsfiddle.net/NicoO/LKJK6/2/查看 CSS 结果(规则被破坏)
关于css - 将两个字符串加在一起 node-sass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22174868/