如果元素有一个共同的公共类，则设置样式

Question

有没有办法使用SASS / CSS为具有公共类和其他类的元素设置样式。例如，我希望边框显示为以下元素：

<div class="plate eggs"></div>
<div class="plate bacon"></div>

但不是：

<div class="plate"></div>

我目前的代码，但我确定有两种方法可以合并这两个规则吗？

.plate {

  border: none;

  &.eggs {

    border: 1px solid red;
  }

  &.bacon {
    border: 1px solid red;
  }
}

Answer 1

SCSS：

.plate {
  border: none;
  &.eggs,&.bacon {
    border: 1px solid red;
  }
}

SASS：

.plate
  border: none
  &.eggs,&.bacon
    border: 1px solid red

您可以在sassmeister中验证您的样式。

Answer 2

为什么不添加另一个类？但如果情况并非如此，我会使用:not([class])。 Ormaybe甚至更进一步，您可以考虑使用div[class^="eggs"]