如何编写能够自动填充CSS伪元素的Sass Mixin？

伪元素是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: ——这显然是不合法的
• 这种写法适合配置驱动的场景，但调试起来会稍微麻烦一些。出错时Sass的错误定位通常指向@each那一行，需要手动检查map的结构

说到底，真正让人头疼的并不是如何写这个mixin，而是每次增加新的伪元素时，都需要同步确认content是否被正确转义、是否遗漏了分号，以及父元素是否设置了position: relative——这些细节都超出了mixin能管理的范围。不过，把这些基础逻辑封装好，至少能让日常开发省心不少。