CSS |这个条件 CSS 是什么？我在哪里可以找到更多关于它的文档？

Question

我正在通读本教程 here .在其中一个示例中，有一个 CSS 类定义，例如:

**
 * A mixin which helps you to add depth to elements according to the Google Material Design spec:
 * http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality
 *
 * Please note that the values given in the specification cannot be used as is. To create the same visual experience
 * the blur parameter has to be doubled.
 *
 * Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp)
 *
 * Example usage:
 *
 * .card {
 *     width: 95px;
 *     height: 95px;
 *     background: #f4f4f4;
 *     -webkit-transition: all 250ms;
 *     -moz-transition: all 250ms;
 *     transition: all 250ms;
 *     .BoxShadowHelper(1);
 *     &:hover {
 *         .BoxShadowHelper(3);
 *         -webkit-transform: translateY(-5px);
 *         -moz-transform: translateY(-5px);
 *         transform: translateY(-5px);
 *     }
 * }
 *
 */

.BoxShadowHelper(@level: 1){
    & when (@level = 1) {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    & when (@level = 2) {
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    & when (@level = 3) {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    & when (@level = 4) {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    & when (@level = 5) {
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
}

我...好吧，不知道我们可以通过类(class)做到这一点。我尝试寻找更多信息，但“CSS 条件逻辑”没有找到任何信息。我找到了 this question在这里，关于 @ 符号，但是当我寻找 more information 时，它似乎与此代码片段无关。

“条件 CSS”调出 this , this ，以及有关包含 IE 样式表的更多问题。

我只是想知道我在 .BoxShadowHelper 和 .card 中看到了什么，以及我可以在哪里了解更多信息!

Answer 1

这不是 vanilla CSS，这是 LESS。

具体来说，那些 @level = 1 是 LESS 的 Guard Comparison Operators。请在此处查看文档 http://lesscss.org/features/#mixin-guards-feature-guard-comparison-operators