sass - 将变量输入属性名称的语法？

Question

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

$variable-name: left;

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

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

border-#{$variable-name}:

我从来没有见过这个标签 -> 用变量替换的大括号业务。

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

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

score 15 · Accepted Answer

基本上，额外的 #{} 东西会插入变量。换句话说，它会将其更改为纯 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);

希望这可以帮助？

1 回答 1