Sass (SCSS) 中的转义百分比字符

Posted 2023-02-24

【中文标题】Sass (SCSS) 中的转义百分比字符

【英文标题】：Escaping percentage character in Sass (SCSS)

【发布时间】：2017-04-30 14:22:35

【问题描述】：

我有一个关于语义的问题。

我正在处理 Sass 中的一长串变量（这是大量的色板和相应的色调）。这些颜色必须精确，因此 lighten() 和 darken() 函数不适合这种情况。

我当前声明的变量如下所示：

$black-13-percent-tint、$black-21-percent-tint等

我偶然发现了this article，感到很兴奋，并略微误解了文章的内容。然后我开始尝试如下声明 Sass 变量：

$black-13\%-tint、$black-21\%-tint等

在意识到我的错误（混淆了类名和 Sass 变量）后，我开始怀疑是否可以在 Sass 变量中转义 % 符号？

基本上我想像下面的例子一样编写 Sass，我想知道是否有可能实现这一点？

.black-13\%-tint-swatch background: $black-13\%-tint;

【问题讨论】：

为什么不使用这个 mixin 来为你完成这项工作？ css-tricks.com/snippets/sass/tint-shade-functions

谢谢@ShannonYoung 在我提出问题后我确实遇到了这个问题。从技术上讲，这个 mixin 可以以不同的方式解决我的问题。但我仍然想知道它们是否是在声明 Sass 变量时使用百分比字符的一种方式。

【参考方案1】：

你可以使用#'%'，这对我有用:)

【讨论】：

这对我来说也适用于不透明度期间 (.)。不透明度：#'.' + #$opacity;