有没有人遇到过使用加号 [+] 和/或大于 [>] 符号的 LESS 编译 CSS 的问题,而包含这些符号会导致编译错误/失败? (我们正在使用标准的 lessc 编译器)。下面的 LESS 与我们正在尝试编译的内容相同 - banana.keynote 之后的第一个加号是关闭编译器错误的原因:
.banana.keynote {
+ {
label:before {
border: 2px solid #CC6633 !important;
}
}
}
.banana.chunga {
+ {
label:before {
border: 2px solid #ffb5ff !important;
}
}
}
.banana.gordita {
+ {
label:before {
border: 2px solid #4067ea !important;
}
}
}
注意:诚然,我正在使用在线转换器将 CSS 转换为 LESS - 这会不会在代码中产生奇怪的工件? 谢谢。
最佳答案
Combinators in Less 后面必须始终跟有元素标识符,即您不能单独使用 +
。将您的代码重写为:
.banana.keynote {
+ label:before {
border: 2px solid #CC6633;
}
}
如果出于某种原因你真的需要“单独”获取它,你可以通过选择器插值来破解它:
@plus: ~'+';
.banana.keynote {
@{plus} {
label:before {
border: 2px solid #CC6633;
}
}
}
---
附言另外请注意以下代码:
.banana.keynote + {
label:before {
border: 2px solid #CC6633;
}
}
虽然编译时没有任何错误,但不会生成正确的 CSS(无效的 +
只是默默地省略)。
关于css - 编译 LESS 时导致问题的特殊字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29400674/