Sass 中的颜色未正确连接

Question

我试图在 Sass 中连接两种颜色：

$helloWorld: pink;
$secondString: red;

p {
  color:$helloWorld + $secondString;
}

但结果是：

 p {
  color: pink; }

为什么颜色没有连接起来产生pinkred？

Answer 1

这是因为 Sass 将所有颜色视为其十六进制值，无论它们是否命名为pink. 它们都是底层的十六进制值。根据Sass 文档：

颜色

任何 CSS 颜色表达式都会返回 SassScript Color 值。这包括大量命名颜色，它们与不带引号的字符串无法区分。

重点是我的。文档指出返回的是颜色值，即十六进制值。包含的链接还显示命名颜色，例如pink只是底层的十六进制值。要解决添加问题，请再次参考文档：

颜色操作

颜色值支持所有算术运算，它们是分段进行的。这意味着依次对红、绿、蓝分量进行操作。例如：

p {
  color: #010203 + #040506;
}

计算01 + 04 = 05, 02 + 05 = 07, and 03 + 06 = 09，并编译为：

p {
  color: #050709; }

同样的原则也适用于此。当您对颜色使用加法时，您不会像字符串一样连接它们，所以pink + red不是pinkred。相反，十六进制值是分段添加的。这是一个例子：

$blue: blue;
$red: red;

p {
    color: $blue + $red
}

这产生：

p {
    color: magenta
}

从上面的示例中，您可以看到这并不执行字符串连接，而是添加蓝色 ( #0000FF) 和红色 ( #FF0000) 以创建洋红色 ( #FF00FF)。在您的情况下，将粉色 ( #FFC0CB) 和红色 ( #FF0000) 逐段相加以生成#FFC0CB，它只是粉色。这就是为什么你得到pink而不是pinkred.

如果您想像字符串一样连接它们，请不要使用+. 相反，您可以尝试字符串插值，以便将颜色视为字符串，而不是颜色：

p {
    color: $helloWorld#{$secondString}
}

这将产生：

p {
    color: pinkred
}

您还可以使用更详细的方法，以便它被迫像字符串一样工作（取消引号只是删除引号）：

p {
    color: unquote($helloWorld+ "" + $secondString);
}

在 SassMeister 尝试一下。请注意，这pinkred不是 Sass 中的命名颜色。