SCSS中使用含嵌套元素的@mixin是否可行？嵌套样式不生效问题

你的@mixin语法实现本身完全可行，编译后生成的选择器结构和你手写的等效CSS没有结构差异，嵌套样式不生效和mixin逻辑无关，是样式作用域匹配问题。

你使用的ion-calendar是Ionic的Web Component组件，内部元素通过Shadow DOM/组件内部渲染，如果你是在单文件组件（Vue SFC、React CSS Modules等）的带作用域的style块中编写这段SCSS：

• 作用域样式会自动给所有选择器的末尾元素添加当前组件的唯一哈希属性标记，比如你写的.switch-btn会被编译成.switch-btn[data-v-xxxxxx]
• 组件内部渲染的.switch-btn、ion-icon、.week-toolbar等元素不会携带当前组件的哈希属性，因此选择器无法匹配到对应元素
• 根节点ion-calendar.schemaXxx是你在当前组件模板中直接写入的元素，会携带哈希标记，因此根节点的background-color可以正常生效
• 你手写的CSS之所以生效，大概率是写在了全局非作用域样式中，不会被追加哈希属性，因此可以正常匹配内部元素。

根据你使用的框架，给mixin内的嵌套选择器添加深度选择器标记，跳过作用域属性的追加：

• Vue 项目使用:deep()语法，可以直接在调用mixin时统一包裹，不需要修改mixin内部：

ion-calendar.schemaDefault {
  :deep() {
    @include schema-calendar();
  }
}

ion-calendar.schemaBlackRed {
  :deep() {
    @include schema-calendar(var(--ion-card-black-red));
  }
}

ion-calendar.schemaIndigo {
  :deep() {
    @include schema-calendar(var(--ion-card-indigo), var(--ion-color-light));
  }
}

• React CSS Modules 项目使用:global()替换上述代码中的:deep()即可。

如果上述方案不生效，可以先导出SCSS编译后的完整CSS文件，对比生成的选择器和你手写的CSS选择器是否一致；也可以打开浏览器开发者工具，选中未生效样式的对应元素，在Styles面板查看：

• 若目标样式规则完全不存在：检查SCSS引入路径、编译配置是否正确
• 若目标样式存在但被划掉：说明存在优先级更高的覆盖规则，可适当提升选择器权重

内容的提问来源于stack exchange，提问作者Heliomar P. Marques