sass - SCSS : How to use two classes together with an ampersand?

Question

我有一些 css 规则要应用于主按钮，我做了这样的事情:

.my-btn {
  &--primary {
     padding: 10px;
  }
}

现在我希望将相同的规则应用于具有“sm”类的主按钮，我可以执行以下操作:

.my-btn {
  &--primary, &--primary.my-btn--sm  {
    padding: 10px;
  }
}

这对我有用。但我也想对“sm”使用“&”，如下所示:

.my-btn {
  &--primary, &--primary.&--sm  {
    padding: 10px;
  }
}

是否可以？

Answer 1

在这种情况下，解决方案可以是使用变量:

.my-btn {
  $this: &;
  &--primary, &--primary#{$this}--sm  {
    padding: 10px;
  }
}

或使用插值语法

.my-btn {
  &--primary, &--primary#{&}--sm  {
    padding: 10px;
  }
}