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

Question

有没有人遇到 LESS 编译 CSS 的问题，它使用加号 [+] and/or 大于 [>] 符号，而包含这些会导致编译 errors/fails？（我们正在使用标准的 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

Less 中的

Combinators 后面必须始终跟有元素标识符，即您不能单独使用 +。将您的代码重写为：

.banana.keynote {
    + label:before {
        border: 2px solid #CC6633;
    }
}

如果出于某种原因你真的需要得到它"alone"，你可以通过选择器插值来破解它：

@plus: ~'+';

.banana.keynote {
    @{plus} {
        label:before {
            border: 2px solid #CC6633;
        }
    }
}

---

P.S。另外请注意以下代码：

.banana.keynote + {
    label:before {
        border: 2px solid #CC6633;
    }
}

虽然编译 w/o 任何错误，都不会产生正确的 CSS（无效的 + 只是默默地省略）。

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

Special characters causing problems when compiling LESS

css

compilation

special-characters

less

---