在属性/规则名称中使用变量的任何方法？

Question

有没有办法在属性或规则名称中使用变量，即：

.foo {
   @dir: right;
   border-{@dir}: 2px;
}

Answer 1

您使用Sass标记了自己的帖子，因此以下是使用SCSS语法执行此操作的方法：

.foo {
   $dir: right;
   border-#{$dir}: 2px;
}

我在SassMeister上验证了这一点。

Answer 2

哦，实际上我的代码会稍作修改，@放在}之前。

@dir: right;
.foo-@{dir} {
  border-@{dir}: 2px;
}