css - 似乎无法在 LESS 中连接两个变量

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)}

我究竟做错了什么？

score 1 · Accepted Answer

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

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}";
}

score 0 · Accepted Answer

根据@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;
}

这是新的演示：

2 回答 2