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

Question

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

$variable-name: left;

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

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

border-#{$variable-name}:

我从来没有见过这个标签 - >大括号业务与变量替代.

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

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

Answer 1

基本上,额外的#{}内容会插入变量.换句话说,它将其更改为纯CSS而不是在键入变量时转储变量(例如,对于颜色很好).

看这里:

和

一个例子:

上海社会科学院

$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);

希望这可以帮助？