我应该如何定义包含逗号的 Stylus 哈希值？答案

【问题标题】：How should I define Stylus hash values containing commas?我应该如何定义包含逗号的 Stylus 哈希值？
【发布时间】：2014-11-08 15:23:18
【问题描述】：

我发现我无法使用花括号和冒号语法或方括号和字符串语法将 Stylus hash 值设置为在其中包含逗号。用" 或' 包装这些值会导致这些字符作为值的一部分输出。

目前，我有：

fonts-serif = Georgia, serif
fonts-sans-serif = Helvetica, Arial, sans-serif

fonts = {
    serif: fonts-serif,
    sans-serif: fonts-sans-serif
}

使用这些值：

font-family: fonts.serif

有没有更好的办法？

【问题讨论】：

标签： variables stylus

【解决方案1】：

你有两个选择：

一）。您可以在值内转义 ,：

fonts = {
  serif: Georgia\, serif
}

body
  font-family: fonts.serif

b)。您可以使用unquote 内置函数并将值括在引号中：

fonts = {
  serif: "Georgia, serif"
}

body
  font-family: unquote(fonts.serif)

【讨论】：

或fonts = { serif: unquote('Georgia, serif') } 然后font-family: fonts.serif

【解决方案2】：

另一种方法是制作一个名为 font-family 的 mixin

  font-family(x)
    title   = 'Georgia', 'Times new Roman'
    content = 'helvetica', Arial
    code    = 'JetBrains Mono', 'Fira Code', monospace

    fonts = title content code

    if x in fonts
      font-family x
    else
      error('invalid font-family')

用法：

.some-title
  font-family title

您可能会问，为什么这种方法更好？

字体变量现在不会暴露给外界
直观的用法
使用不当会出现自定义错误

【讨论】：