Question

所以我设置了一个这样的变量：

$variable-name: left;

在我的CSS中我有一个属性border-left

如果我想将变量替换为属性的名称，我使用以下语法：

border-#{$variable-name}:

我从未见过这个标签 - ＆gt;代替变量的大括号业务。

这种语法是否具有更广泛的意义，或者它只是在这种情况下使用的东西？

非常感谢您花时间阅读我的问题，而那些回复帮助的人非常友好。

Answer 1

基本上，额外的＃{}内容会插入变量。换句话说，它将其更改为纯CSS而不是仅在您键入变量时转储变量（例如，对于颜色很好）。

见这里：

和

一个例子：

SASS

$variable-name: "left";
$font: "Lucida Grande";

.something{
font-family: $font;
font-family: #{$font};
border-#{$variable-name}: 1px solid red;
}

CSS

.something {
   font-family: "Lucida Grande";
   font-family: Lucida Grande;
   border-left: 1px solid red;
}

正如您所看到的，使用＃{}将输出完全呈现为引号之间的输出，而简单的变量声明将只输出整个事物。

我倾向于将插值输出用于文件路径，例如：

$filePath: "/extras/images/"

background-image: url(#{$filePath}imageName.png);

给出了

background-image: url(/extras/images/imageName.png);

希望这有帮助吗？