如果两个元素存在于同一级别 - SCSS 中，则切换规则

Question

我很确定我以前做过这个，但我找不到它，或者我的谷歌技能不够。情况是这样的：

.card {
    // ...
    .card-title {
        margin-bottom: $spacer * .25;
    }
    .categories {
        margin-bottom: $spacer * .25;
    }
}

如果存在任何.categories元素，如何设置margin-bottom: 0？

Answer 1

你可以考虑使用:not()选择器:only-child，如下所示：

.title:not(:only-child) {
  color:red;
}

<div class="container">
  <div class="title">title</div>
  <div class="cat"></div>
  <div class="cat"></div>
  <div class="cat"></div>
</div>
<div class="container">
  <div class="title">title</div>
</div>