css - 如果元素有一个公共(public)类和另一个公共(public)类，则设置样式

Question

有没有一种方法可以使用 SASS/CSS 为具有公共(public)类和其他类的元素设置样式。例如，我希望为以下元素显示边框:

<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 中验证您的样式.