将变量输入属性名称的语法？ [复制]答案

【问题标题】：Syntax of entering a variable into an attribute name? [duplicate]将变量输入属性名称的语法？ [复制]
【发布时间】：2013-09-11 21:34:24
【问题描述】：

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

$variable-name: left;

在我的css中，我有一个属性border-left的样式

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

border-#{$variable-name}:

我从未见过这个标签 -> 用大括号代替变量。

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

非常感谢您抽出宝贵时间阅读我的问题，那些提供帮助的人非常友善。

【问题讨论】：

标签： sass

【解决方案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);

希望这有帮助吗？

【讨论】：