2014-03-04 2 views
1

호출을 단순화하기 위해 getFont이라는 믹스 인을 만들려고합니다. 나침반과 말대꾸으로 나는이 수행 꿀꿀 및 노드 말대꾸를 사용하는 동안 나는이 얻을 나침반을 사용하지만, 나에게 원하는 결과를 제공두 개의 문자열을 더하는 노드 - 새시

@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; 
    } 
} 

:

컴파일러는 어떤을 가진 것처럼
@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

나는이 시험을해야 할 것입니다. 이것은 귀하의 attemp처럼 나침반에서 작동합니다. 어쩌면 다른 시스템에서도 원하는 결과로 이어질 수 있습니다.

@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/에서 실행해야합니다.

+0

나는 결국 알아 낸 것입니다. 질문을 업데이트하기 위해 막 돌아 왔습니다! – locrizak

+0

다행스럽게도 바로 해결책입니다 :) 업데이트 해 주셔서 감사합니다. –

관련 문제