Question

我想在Sass中连接两种颜色：

$helloWorld: pink;
$secondString: red;

p {
  color:$helloWorld + $secondString;
}

但结果是：

 p {
  color: pink; }

为什么连接的颜色不能产生pinkred？

Answer 1

这是因为Sass将所有颜色视为十六进制值，无论它们是否被命名为pink。它们都是引擎盖下的十六进制值。根据{{3}}：

<强>颜色

任何CSS颜色表达式都会返回SassScript颜色值。这包括Sass Documentation，它与未加引号的字符串无法区分。

重点是我的。文档说明返回颜色值，即十六进制值。包含的链接还显示命名颜色（如pink）只是引擎盖下的十六进制值。要解决添加问题，请再次参阅a large number of named colors：

色彩操作

所有算术运算都支持颜色值，它们分段工作。这意味着依次对红色，绿色和蓝色组件执行操作。例如：
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。

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

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

那会产生：

p {
    color: pinkred
}

您还可以使用更详细的方法，以便强制它像字符串一样（取消引用除掉引号）：

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

string interpolation。请注意，pinkred不是Sass中的命名颜色。

在Sass中颜色没有正确连接

1 个答案: