如何在 SASS 中引用字符串？答案

【问题标题】：How can I quote strings in SASS?如何在 SASS 中引用字符串？
【发布时间】：2010-11-26 22:31:00
【问题描述】：

我正在使用 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); }

无论我如何尝试，我都不能让它引用“我的字体”（带有“！name”）或“truetype”（它会删除引号）。关于如何做到这一点的任何想法？

【问题讨论】：

标签： css ruby sass

【解决方案1】：

使用字符串插值可以做得更好：

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

但我同意我们需要一种更好的方法来处理 sass 中的引用字符串。 Sass 有足够的上下文在这里做一些智能的事情，而不是将引用逻辑卸载给用户。

【讨论】：

【解决方案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; }

我认为你不能反过来引用（即单引号内的双引号）。这样做会给你编译错误。

希望有所帮助！

【讨论】：

【解决方案3】：

好的，我发现我需要做的：

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

该死的，这是一些尴尬的语法......

【讨论】：

【解决方案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'")

【讨论】：

【解决方案5】：

这会在事物周围加上引号：

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

【讨论】：

【解决方案6】：

可以使用字符串函数quote：

font-family: quote(!name)

【讨论】：