less解析.icon.heart报错因将其误判为两个类名，需用.icon\.heart或更稳妥的~".icon.heart"；属性选择器嵌套方括号须整体~""包裹并转义引号；:deep()内不支持less语法，应改用引号属性值或class匹配；~""内变量不展开，须先拼接再使用。
Less解析`.icon.heart`这类含点号的选择器直接报错
Less把.icon.heart当成两个连续类名，违反CSS选择器语法规范，直接抛ParseError: Expected selector。它不走转义逻辑，而是卡在语法校验阶段。
必须让Less认为这是“一个合法标识符”，而不是“两个类名拼接”。两种可行方案：
-
.icon.heart：反斜杠转义中间的点，但仅限简单静态场景；注意.后不能紧跟字母或数字，否则可能被误读为Unicode转义 -
~".icon.heart"：用~""强制原样输出，绕过Less解析器——这是更稳妥、适用范围更广的做法
属性选择器里[data-id="s0-1-17-5[2]"]编译失败
方括号嵌套会让Less解析器崩溃，因为它把内部[2]当作未闭合的属性选择器处理，而非字符串值的一部分。
别试图用[和]逐个转义——Less对嵌套结构的转义支持极弱，大概率仍报错。
正确做法是整段用~""包裹，并确保引号正确转义：
[data-id="s0-1-17-5[2]"] → ~"[data-id="s0-1-17-5[2]"]"
注意：~""内不展开Less变量，所以~"[data-id="@{id}"]"无效；需先拼接再插值：@id-str: "s0-1-17-5[2]"; @{selector}: ~"[data-id="@{id-str}"]";
Vue中:deep()里写.el-input__inner[data-v-123456[active]]失效
:deep()不是Less语法，是Vue的伪选择器，其内部仍走标准CSS解析流程。Less遇到[active]]会直接中断编译。
有两条路可选：
- 确认HTML实际渲染的属性值是否真带
[和]（用DevTools → Edit as HTML看），若固定可用引号形式：:deep(.el-input__inner[data-v-123456="active"]) - 若值动态且不可控，放弃属性选择器，改用class匹配：
:deep(.el-input__inner).active
别在:deep()里混用@import或mixin调用——这些在伪选择器上下文中无意义，还可能触发静默错误。
~""里想用变量插值却没生效
~""是“原样输出”的铁律，里面任何@{var}或${@var}都不会展开。这是设计使然，不是bug。
必须分两步走：
- 先拼接字符串：
@cls-name: "btn"; @full-selector: ~".@{cls-name}-active"; - 再使用：
@{full-selector} { color: red; }
常见陷阱：以为~".@{cls-name}-active"能直接展开，结果输出字面量.@{cls-name}-active，浏览器根本找不到这个选择器。
~""怎么写，而是忘了它不兼容变量插值，或者在:deep()这种非标准上下文里硬套Less语法规则。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
