用Mixin封装伪元素可避免漏写content、单双冒号混淆等问题：①基础Mixin强制补全content和display；②按用途拆分定位/下划线等专用Mixin；③支持键值对传参实现多伪元素独立配置；④IE兼容需手动处理单冒号，无法自动降级。
伪元素写多了容易漏双冒号或写错语法
很多人用 ::before 和 ::after 时，手一快写成 :before（单冒号），或者在 Sass 中忘了加引号、漏掉 content: ""，结果样式完全不生效。Sass 本身不校验伪元素语法是否合法，编译照常通过，但浏览器直接忽略——你得靠开发者工具里反复检查 DOM 才能发现是伪元素没渲染出来。
用 Mixin 封装能强制补全基础结构，避免低级遗漏：
@mixin pseudo($display: block) {
content: "";
display: $display;
}
调用时直接写：
.btn::before {
@include pseudo();
}
这样每次生成的伪元素都自带 content: "" 和默认 display: block，不用每次手动敲，也杜绝了漏 content 导致的“看不见却占位”问题。
立即学习“前端免费学习笔记（深入）”；
Sass里用Mixin统一控制伪元素的尺寸和定位
图标类按钮、下划线动画、装饰性三角等场景，经常要给 ::before 或 ::after 设固定宽高、绝对定位、甚至 transform 偏移。如果每个地方都重复写 position: absolute; top: 0; left: 0; width: 12px; height: 12px;，维护成本高，改一个尺寸得全局搜。
推荐按用途拆两个 Mixin：
-
@mixin pseudo-abs($top: 0, $left: 0, $size: 1em)：专用于绝对定位小图标的伪元素，自动设position: absolute和width/height -
@mixin pseudo-underline($height: 2px, $offset: -2px)：专门处理下划线类::after，带bottom偏移和背景色预留
示例：
.link::after {
@include pseudo-underline($height: 1px, $offset: -4px);
background-color: #007bff;
}
多个伪元素共存时，Mixin 要支持独立配置
一个元素同时用 ::before 和 ::after（比如带箭头的下拉菜单），两者的 content、z-index、transform 往往不同。如果只用一个通用 Mixin，参数容易混乱，比如 @include pseudo($z-index: 1) 不知道是配哪个伪元素的。
解决办法是让 Mixin 接收可选参数，并留出扩展空间：
@mixin pseudo($props: ()) {
@each $prop, $value in $props {
#{$prop}: $value;
}
content: "";
}
调用时更灵活：
.dropdown::before {
@include pseudo((
"content": "'▲'",
"top": "50%",
"right": "1rem",
"transform": "translateY(-50%)"
));
}
注意：content 值必须加引号（包括空字符串），否则 Sass 编译报错；transform 这类带函数的值也要引起来，不然会被当成 Sass 函数提前执行。
兼容性陷阱：Sass Mixin 不能自动降级到单冒号
老项目还要支持 IE8–IE11？那得小心——::before 在 IE8 只认 :before（单冒号）。Sass Mixin 再好，也不会帮你输出两套语法。别指望它自动 fallback。
真实做法只有两个：
- 项目已放弃 IE8–9：统一用双冒号，Mixin 安心用
::before - 仍需兼容：别用 Mixin 抽离伪元素主体，改用占位符选择器 +
%pseudo配合@extend，再手动写一遍单冒号版本（Sass 不支持条件编译伪元素语法）
顺带一提：content 里放 Unicode 字符（如 "\2192"）比放图片路径更稳妥，避免 base64 或相对路径在不同上下文里失效。
伪元素本身语义弱、调试难，Mixin 只是减少重复劳动，真出问题还得回到元素盒模型和层叠上下文里一层层看——这点没法偷懒。
