SCSS拼接变量与字符串后属性值带引号，请问问题出在哪里？

嘿，这个问题我之前踩过坑！你遇到的问题根源在于SCSS里的+运算符的作用——它是字符串拼接运算符，只要拼接的内容里包含字符串（比如你写的' solid '），整个结果就会被识别为带引号的字符串字面量，所以编译后CSS属性值就带上了引号，这显然不符合我们想要的效果。

正确的两种解决方式： #

1. 直接拼接变量与固定值（最简洁）

SCSS对于CSS属性值的组成部分，支持直接把变量和关键字写在一起，不需要任何运算符，它会自动帮你解析成正确的属性值：

$border-width: 3px;
$border-color: #ccc;
$border-values: $border-width solid $border-color;

.box {
  border-left: $border-values;
}

编译后就能得到干净的CSS：

.box {
  border-left: 3px solid #ccc;
}

2. 使用插值语法#{}（更通用）

如果你需要在更复杂的场景下插入变量（比如动态生成属性名、选择器，或者变量和字符串混合的场景），可以用SCSS的插值语法#{}，它能把变量的值直接插入到对应的位置，不会生成带引号的字符串：

$border-width: 3px;
$border-color: #ccc;
$border-values: #{$border-width} solid #{$border-color};

.box {
  border-left: $border-values;
}

这种方式和上面的结果是一样的，但适用性更广，比如你想动态生成边框方向：

$side: left;
.box {
  #{$side}-border: #{$border-width} solid #{$border-color};
}

为什么原来的写法会出问题？ #

你用$border-width + ' solid ' + $border-color的时候，SCSS会把数值类型的$border-width和$border-color自动转换成字符串，然后拼接成一个完整的带引号字符串"3px solid #ccc"，而CSS的border-left属性不接受带引号的属性值（除非是像字体名称这种特殊情况），所以就出现了你看到的错误结果。

内容的提问来源于stack exchange，提问作者Frederick M. Rogers