伪元素 content 值应通过 Less Mixin 封装以提升可维护性，如 .icon-content(@char) 处理 Unicode、.counter-content(@prefix, @suffix) 拼接计数器，并注意 ~"" 转义、类型区分及多 Mixin 组合替代字符串硬拼。
伪元素 content 值写死会导致维护困难
直接在 ::before 或 ::after 里硬写 content: "→" 或 content: "\2022"，后续要改符号、加空格、适配多语言时就得全局搜改。更麻烦的是，有些 content 需要动态拼接（比如带计数器的章节号），纯 CSS 没变量也没字符串操作能力。
用 Less Mixin 封装 content 值生成逻辑
核心是把 content 的值抽象成可复用、可参数化的函数式调用。Less 不支持返回值，但 Mixin 可以接收参数并直接输出声明，适合封装这类“模板化样式”。
常见做法：
- 用
.icon-content(@char)统一处理 Unicode 字符，自动加引号和转义（如\f00c→"\f00c"） - 用
.counter-content(@prefix: "", @suffix: "")拼接计数器，生成content: @prefix counter(section) @suffix - 对空 content 场景（如仅作装饰性伪元素），用
.empty-content()输出content: ""，避免漏写引号导致解析失败
示例：
.icon-content(@char) {
content: ~"\"@{char}\"";
}
.example::before {
.icon-content("\f105"); // 编译为 content: "\f105";
}
注意 Less 字符串拼接与转义的坑
Less 的 ~"" 是关键：它让内容绕过编译器转义，原样输出到 CSS。不加 ~ 会把 \f105 当作 Less 字符串字面量处理，可能被二次转义或截断。
其他易错点：
-
content值为数字或关键字（如none）时不能加引号，Mixin 要区分类型，否则生成content: "none"就失效了 - 使用
counter()时，必须确保父元素有counter-increment，Mixin 只管输出，不校验上下文 - IE 不支持
content用于非::before/::after伪元素，但 Mixin 本身不解决兼容性，得靠项目级 autoprefixer 配置兜底
复杂 content 场景建议拆解为嵌套 Mixin
当 content 需组合图标 + 文本 + 计数器（例如 “第 3 章 ▸”），不要堆在一个 Mixin 里拼接。拆成：
-
.chapter-prefix()→content: "第 " -
.chapter-counter()→content: counter(chapter) -
.chapter-suffix()→content: " 章 ▸"
再用 display: flex 或绝对定位组合视觉效果。强行用一个 Mixin 拼字符串不仅难读，还容易因空格/换行破坏 CSS 解析——毕竟 content 对空白敏感，而 Less 编译后空格不可控。
真正难的不是写 Mixin，而是判断哪些 content 逻辑该抽，哪些该留在局部；抽太细增加调用成本，抽太粗失去封装意义。边界往往在“是否被三处以上重复使用”和“是否涉及业务语义”之间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
