如何在Sass中编写一个能够自动填充CSS伪元素的Mixin

作者：袖梨 2026-06-22

伪元素内容必须用content显式声明，否则不生效；Sass mixin不会自动补全，需将content设为必传参数或默认空字符串""，且不可用content:none。

伪元素内容必须用 `content` 显式声明，否则不生效

很多人写 ::before 或 ::after 时漏掉 content，结果样式完全没反应——Sass 的 mixin 不会帮你补这个。它只是生成 CSS，而浏览器强制要求伪元素必须有 content 值（哪怕为空字符串）。所以 mixin 必须把 content 当作必传参数或默认设为 ""。

实操建议：

不要依赖默认值“自动填充”，显式传入 content: "" 或 content: "×" 更安全
如果想支持纯装饰性伪元素（无文字），content: "" 是唯一合法选择；content: none 不生效
避免在 mixin 内部用 @if $content == null 自动 fallback——容易掩盖误用，不如直接报错或强制传参

用 `@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 会当变量找，找不到就报错
mixins 里嵌套了另一个带插值的 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)  ));}

关键提醒：