SCSS中@mixin内定义的样式类无法生效问题求助

场景：需要实现父元素拥有active类时，切换其子元素的背景图，为了在样式表多处复用，将这段逻辑写在了@mixin中，但发现@mixin内的样式完全不生效，把样式移出@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，但没有调用它。SCSS的混入（mixin）是需要通过@include指令主动引入到样式代码中的，仅定义不调用的话，编译后的最终CSS文件里不会包含这部分样式规则，自然无法生效。

解决方法 #

在需要使用这段样式的位置，用@include调用你定义的activeLinks混入即可：

全局复用示例

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

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

// 调用混入，编译后会生成对应的CSS规则
@include activeLinks;

特定选择器内复用示例

如果需要在某个组件或父选择器范围内复用这段样式：

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

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

// 在某个组件内调用，样式仅作用于该组件下的元素
.some-component {
  @include activeLinks;
}

调用后，编译出的CSS会包含.active .link1的样式规则，就能正常覆盖默认背景图了。

内容的提问来源于stack exchange，提问作者newcoder00