Sass의 현악기를 어떻게 인용 할 수 있습니까?

Question

Sass를 사용하여 @font-face mixin을 생성하지만 다음과 같습니다.

=remotefont(!name, !url)
  @font-face
    font-family = !name
    src = url(!url + ".eot")
    src = local(!name), url(!url + ".ttf") format("truetype")

+remotefont("My font", "/myfont.ttf")

이것이된다 :

@font-face {
  font-family: My font;
  src: url(/myfont.ttf.eot);
  src: local(My font), url(/myfont.ttf.ttf) format(truetype); }

아무리 시도하더라도 "My Font"( "! name") 또는 "Truetype"(따옴표를 제거 함)를 인용 할 수 없습니다. 내가 이것을 할 수있는 방법에 대한 아이디어가 있습니까?

Answer 1

문자열 보간을 사용하여 조금 더 잘 만들 수 있습니다.

!name = "asdf"
.foo
  font-family = "\"#{!name}\""

그러나 나는 우리가 Sass에서 인용 된 현을 다루기위한 더 나은 접근법이 필요하다는 데 동의합니다. Sass는 여기서 지능적인 일을하고 인용 논리를 사용자에게 오프로드하지 않기에 충분한 맥락을 가지고 있습니다.

Answer 2

변수에서 인용 할 수 있습니다 단일 따옴표 내부에 이중 인용문. 이것이 내가하는 방법입니다.

!string = "'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif"
.foo
  :font-family= !string

이것은 다음과 같이 올바르게 컴파일됩니다.

.foo{
  font-family: 'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif; }

나는 당신이 다른 방식으로 인용 할 수 없다고 생각합니다 (예 : 단일 따옴표 내부의 이중 인용문). 그렇게하면 컴파일 오류가 제공됩니다.

도움이 되었기를 바랍니다!

Answer 3

좋아, 내가해야한다는 것을 알았다.

"\"" + !name + "\""

젠장 어색한 구문 ...

Answer 4

사용 http://www.fontsquirrel.com/fontface/generator해당 Sass Mixin이 있습니다.

=addfont(!name, !url, !family = 0)
  @if !family == 0
    !family = !name
  @font-face
    font-family = "'#{!name}'"
    src = url(!url + ".eot")
    src = local("'#{!name}'"), local("'#{!family}'"), url(!url + ".woff") format("'woff'"), url(!url + ".ttf") format("'truetype'"), url(!url + ".svg#" + !name) format("'svg'")

Answer 5

이것은 사물 주위에 인용문을합니다.

@font-face {
  src: url("\"#{$ngx-font-path}/ngx-icon.eot\"");
}