使用 BEM model 在嵌套元素中選擇相鄰元素

Question

如果hl-mweb-text-banner__cta和hl-mweb-text-banner__cta相鄰，我想添加邊距頂部。 我有以下內容：

.hl-events-items {
  .hl-mweb-text-banner {
     &__cta + &__fineprint {
         margin-top: 5px;
     }
}

編譯為

.hl-events-items .hl-mweb-text-banner__cta + .hl-events-items .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

在 html 中，我有這樣嵌套的元素

<div class="hl-events-items">
   <div class="hl-mweb-text-banner" >
      <div class="hl-mweb-text-banner__cta">
         Shop Now 
      </div>
      <div class="hl-mweb-text-banner__fineprint">
         No Min. Max $100 off. 1x use. Ends 3/24
      </div>
   </div>
</div>

但是在這種情況下工作的 CSS 是

.hl-events-items .hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

我如何在更少的時間內實現這一目標。 任何幫助表示贊賞。

Answer 1

沒有優雅的方法可以做到這一點，但如果你真的喜歡規則重疊，這是可能的。

提示：可以定義本地 sass 變量

以下代碼

/* BLOCK */
.hl-mweb-text-banner {
  $prefix: &;

  &__cta + #{$prefix}__fineprint {
    margin-top: 5px;
  }
}

將被轉譯為

.hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

完整用例

/* BLOCK */
.hl-mweb-text-banner {
  $prefix: &;

  /* ELEMENT */
  &__fineprint {

    /* VARIATION */
    .hl-events-items #{$prefix}__cta + & {
      margin-top: 5px;
    }
  }
}

將被轉譯為

.hl-events-items .hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

我希望它有所幫助。 干杯。