SCSS：如何将两个类与和号一起使用？

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;
  }
}