伪元素是CSS中极具实用性却容易踩坑的特性。很多开发者在编写::before或::after时，常常忽略content属性，导致样式毫无效果——遇到这种问题往往要排查很久才能找到症结。实际上，浏览器强制规定伪元素必须包含content值，哪怕只是一个空字符串也能正常运作。
如果你正在使用Sass，mixin并不会自动为你补全这个属性值。它只是按照指令生成对应的CSS代码。因此，在定义mixin时，务必将content作为必填参数处理，或者默认设置为一个空字符串""。
这里分享几个实战经验：
- 尽量不要依赖默认值的“自动补全”机制，显式写入
content: ""或content: "×"更加稳妥 - 如果你只需要装饰性伪元素（即不需要显示文字），
content: ""是唯一合规的选择；content: none并不会生效 - 避免在
mixin内部使用@if $content == null来做自动回退，这种逻辑容易掩盖真正的错误用法，更好的做法是直接抛出错误或强制要求传入参数
用@mixin pseudo封装通用逻辑，但不要硬塞所有样式
一个实用的mixin应该专注于“生成伪元素规则块”这一核心任务，而不是试图覆盖所有可能的样式组合。来看这个轻量级版本：
@mixin pseudo($position: after, $content: "") { &::#{$position} { content: #{$content}; position: absolute; }}这里有几点需要留意：
$position支持before或after两个值，通过插值#{$position}来构建选择器。注意不要写成#{&}::#{$position}——Sass会直接报错$content可以接受字符串、attr()函数甚至url()，但传入时务必记得加引号（比如"attr(data-label)"），否则Sass会将其当作变量来解析- 不要在
mixin里预设top、left等位置数值——不同场景下这些值差异极大，不如留空让使用者自行补充，反而更加灵活
遇到编译错误该怎么处理？
如果你看到类似这样的错误提示：Invalid CSS after "...&::#{$position}": expected "{", got ";"，说明Sass编译环节出了问题。最常见的诱因包括：
- 在
@mixin外部使用了#{$position}，但$position未定义或作用域不匹配 $position的值不是字符串类型，比如传了after却没有加引号——Sass会把它当作变量来查找，找不到自然就会报错mixin内部嵌套了另一个带插值的mixin，并且内部使用了同名变量，造成命名冲突
有一个快速排查的技巧：把#{$position}临时替换成固定值after，看看是否还会报错。如果问题消失了，基本可以确定是插值变量的问题。
需要同时控制多个伪元素？试试@each + map
单个伪元素用上面的mixin已经够用。但如果你需要同时管理::before和::after，硬写两个@include会显得比较冗余。这种情况下，可以考虑传入一个map来处理：
@mixin pseudos($config: ()) { @each $pseudo, $props in $config { &::#{$pseudo} { @each $key, $value in $props { #{$key}: #{$value}; } } }}// 使用.example { @include pseudos(( before: (content: '"▶"', color: blue), after: (content: '"◀"', color: red) ));}使用时有几个关键要点：
map的key必须是字符串（比如"before"）或标识符（before），但插值时统一使用#{$pseudo}即可content的值如果是字符串字面量（例如"▶"），需要再套一层引号：'"▶"'，否则编译出来会变成content: ▶——这显然是不合法的CSS- 这种写法非常适合配置驱动的场景，但调试时可能会稍微麻烦一些。出错时Sass的错误定位通常会指向
@each那一行，你需要手动检查map的结构是否正确
说到底，真正让人头疼的并不是怎么写这个mixin，而是每次新增伪元素时，都需要同步确认content是否被正确转义、是否遗漏了分号，以及父元素是否设置了position: relative——这些细节都已经超出了mixin能管理的范围。不过话又说回来，把这些基础逻辑封装好，至少能让日常开发省心不少。
