Question

我正在尝试将两个变量@a和@b组合成一个字符串，变量值用逗号分隔。这是我的尝试：

p {
    @a: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    @b: 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: ~"@{a}, @{b}";
}

输出：

p {box-shadow: [object Object],[object Object]}

预期：

p {box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)}

我做错了什么？

Answer 1

我从评论中意识到你被引导到一个有帮助的答案。只是为了澄清为什么你的原始解决方案不起作用，这是因为你没有将变量定义为字符串。你需要这个（注意你的字符串引号）：

p {
    @a: "inset 0 1px 1px rgba(0, 0, 0, 0.075)";
    @b: "0 0 8px rgba(82, 168, 236, 0.6)";
    box-shadow: ~"@{a}, @{b}";
}

Answer 2

<强>校正根据@ seven-phases-max

的建议更新答案

最简单的解决方案按预期工作：

p {
    @a: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    @b: 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: @a, @b;
}

以下是新演示：