浏览器不识别@mixin，因其属sass编译期语法；须经dart sass等编译为标准css后才能生效；直接在html style标签中书写会被忽略。
Sass 的 @mixin 和 @include 不是 HTML 功能，而是 Sass（一种 CSS 预处理器）的语法；HTML 本身无法直接使用它们。
为什么浏览器里写 @mixin 没反应？
因为浏览器只解析标准 CSS，@mixin 是 Sass 编译阶段才处理的指令。如果你在 .html 文件的 <style></style> 标签里直接写 @mixin button-base { ... }，它会被完全忽略——连报错都不会有，就像写了一行注释。
- 浏览器看到的是原始 CSS，不是 Sass 源码
- 必须经过 Sass 编译器（如 Dart Sass、Node Sass）把
@mixin/@include转成普通 CSS 后，才能生效 - 常见误操作：用 VS Code 打开
.scss文件但没配置保存时自动编译，结果改了 mixin 却没更新 CSS
怎么正确声明和调用一个按钮样式复用模块？
在 .scss 文件中定义 @mixin，再用 @include 注入到选择器里：
@mixin button-base($padding: 8px 16px, $bg: #007bff) {
display: inline-block;
padding: $padding;
background-color: $bg;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
.btn-primary {
@include button-base($bg: #007bff);
}
.btn-danger {
@include button-base($bg: #dc3545, $padding: 6px 12px);
}
- 参数支持默认值，调用时只覆盖需要变的部分
- 不要在
@mixin里写嵌套选择器（如&:hover），除非你明确需要它随宿主选择器一起输出；否则容易生成冗余或错位的 CSS - 变量名用
$开头，调用时参数顺序可乱，但命名传参（$bg: #dc3545）更安全
什么时候该用 @mixin，而不是 CSS 自定义属性（--color）？
@mixin 适合生成**结构+值组合固定、逻辑强耦合**的样式块；CSS 自定义属性更适合运行时动态变更的单一值。
- 用
@mixin：一套带 padding/border-radius/transition 的卡片样式，每次复用都需完整结构 - 用
--color：主题色切换，JS 动态改document.documentElement.style.setProperty('--color', 'red') - 混用风险：在
@mixin里引用var(--color)看似灵活，但编译后无法做条件判断或计算，反而削弱了 Sass 的编译期能力
真正难的不是写对语法，而是判断哪些样式“值得”抽成 mixin：太细碎（比如只封装一个 margin-top）增加维护成本，太宽泛（比如 @mixin layout-container 包含 grid/flex/响应式所有逻辑）又失去复用弹性。边界感得靠项目里反复删改几次才摸得清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
