html - Sass - 目标 ID 限制某些样式，如果它具有匹配的类，然后添加由类设置的其他样式

Question

问题

我需要定位一个 <section>具有在每个页面中显示一次的特定 ID。但是每个人都会有一个独特的类(class)。如果该类是动态添加的，则该部分的某些样式将不适用。试图找出如何使用 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

删除 & 和 .soldout 之间的空格 {

&.soldout {

你的方式是，你在#featured-product 中寻找 .soldout 因为你有空间。

您不是在寻找带有 .soldout 类别的#featured-product