css - 编译 LESS 时导致问题的特殊字符

Question

有没有人遇到过使用加号 [+] 和/或大于 [>] 符号的 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 - 这会不会在代码中产生奇怪的工件？谢谢。

Answer 1

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(无效的 + 只是默默地省略)。