伪元素图标必须用&::before或&::after紧贴写法，&与伪元素间不可有空格；SVG路径需转义并用单引号包裹；Mixin应统一控制尺寸、颜色和vertical-align；IE11需显式设display:inline-block。
伪元素图标必须用&::before或&::after紧贴写法
Less 的 & 会绑定字面最近的父选择器，但只要中间多一个空格，就会编译成后代选择器，导致图标不显示。比如你本想给 .icon-home 加个 SVG 图标，写成：
.icon-home { & ::before { content: ""; } }
结果生成的是 .icon-home ::before（注意空格），浏览器只匹配子元素里的 ::before，而你要的是 .icon-home::before。
- ✅ 正确写法：
&::before或&::after，&和伪元素之间**不能有空格** - ⚠️
&:before虽然部分 Less 版本能编译，但双冒号才是标准语法，单冒号在现代浏览器中可能被忽略 - 如果伪元素要带类名（如
.icon-home--active::before），得靠嵌套再拼接：&--active { &::before { ... } }，不能指望&__icon--active自动推导
content 里塞 SVG 路径必须转义并用单引号包裹
直接把 SVG 路径写进 content: "..." 会炸：未转义的 "、、<code>>、& 全部导致编译失败或运行时截断。浏览器解析 content 里的字符串时极其严格，出错只报 “Invalid property value”，不提示位置。
- 路径必须先过一遍在线工具（如 SVG to Data URI），拿到类似
data:image/svg+xml;charset=utf8,%3Csvg%20...%3E的字符串，再手动截取%3Csvg...部分 - 放进
content前，所有"换成\"，换成 <code>，<code>>换成>，&换成& - 整个字符串必须用**单引号**包裹：
content: 'data:image/svg+xml;...';，双引号会和内部转义冲突 - 别用
%20表示空格——Less 编译可能二次编码成%2520；删空格或用+更稳
用参数化 Mixin 统一控制尺寸、颜色和垂直对齐
伪元素图标是零宽高内联元素，默认受 line-height 和 vertical-align 影响，常出现底部留白或上下偏移。Mixin 必须把这三件事锁死，不能靠调用方补样式。
立即学习“前端免费学习笔记（深入）”；
- 固定
display: inline-block+vertical-align: middle，避免父容器字体大小或行高干扰 - 尺寸用
@size参数控制，推荐用px（如16px），不用em——否则缩放文字时图标比例失真 - 颜色建议默认
currentColor，继承文字色；若需强制覆盖，加@color参数，但别用contrast()自动推导，暗色模式下易翻车 - 别在 Mixin 里写
width/height，SVG 图标靠background-size或font-size控制更可靠
IE11 及以下必须显式声明 display: inline-block
IE11 对伪元素的 content 渲染很脆弱，尤其当内容是 data URI 时，不设 display 就可能完全不渲染。这不是兼容性“可选”，而是硬性前提。
- 即使其他浏览器能 fallback，IE11 下必须写
display: inline-block（不能只写inline） - 如果图标用于按钮内，还要加
box-sizing: border-box，否则 padding 计算错位 - 别依赖构建工具自动加前缀——
::before在 IE11 是原生支持的，但display: inline-block不加就真没 - 真正难搞的是动态主题切换：IE11 不支持 CSS 变量，所以
@color参数必须在 Less 编译期就确定，不能等 JS 注入后改
最麻烦的不是语法怎么写，而是当你把伪元素 Mixin 套进媒体查询或 BEM 修饰符里时，& 只认字面父级，不感知运行时加的类名（比如 .theme-dark）。这种限制不会报错，只会让图标某天突然消失，而且很难定位到是 & 绑定错了层级。
