如果我的父元素有活動類，我將嘗試為我的子元素切換背景圖像。這個子“活動”類需要在@mixin中完成，因為它將在整個樣式表中使用，但該類沒有被應用。

示例HTML

<div class="active">
  <a class="link1">link1</a>
  <a class="link2">link2</a>
</div>

我的SCSS

.link1 {
    background-image: url('/image.png');
  }

...

  @mixin activeLinks {
    .active .link1 {
    background-image: url('/active_image.png');
    }
  }

這不會更新鏈接的圖像。但是如果我將樣式移到@mixin之外，它完全可以工作。知道為什么嗎？

mixin用于存儲靜態代碼，您用@include添加到元素中

例子

<div class="active">
  <a class="link1">link1</a>
  <a class="link2">link2</a>
</div>

mixin需要在任何標記、類或括號之外，因為您可能計劃在其他部分使用它。在我的例子中，我把我所有的mixin放在一個外部表中，然后用import添加它，你可以把mixin放在scss文件的底部

@mixin links {
        color: red;
      }

//用@include添加mixin，這將調用mixin并應用紅色

.active{
  .link1{
  @include links;
  }
}