كيف يمكنني أقتبس السلاسل في ساس؟

Question

وأنا باستخدام ساس لتوليد @ الخط وجه 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); }

ومهما أحاول، وأنا لا يمكن أن يكون ذلك إما أقتبس "بلدي الخط" (مع "! اسم") أو "تروتايب" (يزيل علامات الاقتباس). أي أفكار عن كيف يمكن القيام بذلك؟

Answer 1

ويمكن ان يكون أفضل قليلا باستخدام الاستيفاء سلسلة:

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

ولكن أوافق على أننا بحاجة إلى طريقة أفضل للتعامل مع السلاسل بين علامات الاقتباس في ساس. ساس لديها ما يكفي السياق أن تفعل شيئا ذكي هنا وليس افراغ المنطق نقلا للمستخدم.

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 لدي ساس 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\"");
}