在 SCSS 中使用选择器附加类名

Question

我正在尝试使用选择器和符号将

PREFIX

添加到类名中。

我不是想实现如下所示的嵌套类。

.some-class.another-class { }

我们可以使用嵌套来做到这一点

.some-class {
  &.another-class {}
}

我正在尝试的是：在下面的 Classess 中添加前缀

custom-

。

 .custom-{
   &.p-0    { padding : 0px; }
   &.px-0   { padding-left: 0px; padding-right: 0px; }
   &.py-0   { padding-top: 0px; padding-bottom: 0px; }
   &.pt-0   { padding-top: 0px; }
   &.pr-0   { padding-right: 0px; }
   &.pb-0   { padding-bottom: 0px; }

  }

So to result in
class="custom-p-0"   --> I want this class with styles.

面临的问题： CSS 没有应用

Answer 1

只需删除

&

后面的点。它应该做以下事情：

.some-class {
  &.another-class {}
}

会变成：

.some-class.another-class {}

需要两个班级在一起

一会儿

.some-class {
  &-and-suffix {}
}

会变成：

.some-class-and-suffix {}

所以你需要这样的东西：

.custom-{
 &p-0    { padding : 0px; }
 &px-0   { padding-left: 0px; padding-right: 0px; }
 &py-0   { padding-top: 0px; padding-bottom: 0px; }
 &pt-0   { padding-top: 0px; }
 &pr-0   { padding-right: 0px; }
 &pb-0   { padding-bottom: 0px; }
}