SCSS连接变量和字符串值会导致整个属性值的引用

Question

我还在学习SCSS，我在语法方面有点挣扎。我试图在一个变量中连接变量和字符串，如下所示：

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

$border-values: $border-width + ' solid ' + $border-color;

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

这会在处理后的值周围生成一组引号，如下所示：

border-left: "3px solid #ccc";

我哪里错了？

Answer 1

您不需要额外的变量，只需正常使用这些值：

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

但是如果你真的想要一个$border-values变量，你可以做到这一点（没有尝试过）：

$border-values: $border-width solid $border-color;

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

Answer 2

试试这个

$border-values: unquote($border-width + " solid "  + $border-color);

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

unquote函数从字符串中删除引号。查看Official Doc