Sass - 如果某个样式具有匹配的类，则定位ID限制某些样式，然后添加由类设置的其他样式

Question

问题

我需要定位一个具有特定ID的<section>，该ID会在每个页面中显示一次。但每个人都会有一个独特的课程。如果动态添加该类，则该部分的某些样式将不适用。试图找出如何使用Sass最好地嵌套样式。

代码

演示

以下是CodePen的演示。 因为它具有.soldout类，所以背景应该是灰色而不是红色。

HTML

<section id="featured-product" class="soldout">
  <h1>This car is no longer avaiable</h1>
  <img src="https://img.gta5-mods.com/q95/images/2013-lamborghini-veneno-hq-digitaldials/bb4811-venenomain.jpg">
</section>

SCSS

#featured-product {
  /* these styles always apply */
  color: #f1f1f1;
  font-family: 'Oswald', sans-serif;
  text-align:center;


  /* These classes should not apply if the section has a class of .soldout */
  background: #FC332E;
  padding: 25px 30px 45px;

  & .soldout {
    /* These styles only apply when the element has matching ID and this class added in*/
    background: #BDBEBA;
    padding: 25px;
  }
  img { width: 400px; }
}

Answer 1

删除＆amp;之间的空格和.soldout {

&.soldout {

你拥有它的方式，是你在寻找.soldout WITHIN＃featured-product，因为你有空间。

你不是在寻找带有.soldout

类的＃featured-product