Question

我想打破我的所有Media-queries并将CSS属性作为参数传递。

.bp1(@css){
    @media (max-width: 959px){
        @css
    }
}

.bp1(width: 186px;);

不幸的是，这不会起作用，并使Less少失败:(

Answer 1

从Less v1.7.0开始，可以传递detached rulesets as parameter to a mixin。

引用较少的网站

分离的规则集是一组CSS属性，嵌套规则集，媒体声明或存储在变量中的任何其他内容。您可以将其包含在规则集或其他结构中，并将其所有属性复制到那里。您也可以将它用作mixin参数，并将其作为任何其他变量传递。

请注意，构成规则集一部分的属性必须包含在{}中。此外，在分离的规则集调用（如()）之后，括号（@css();）是必须的。如果最后没有括号，则呼叫将无效。

.bp1(@css){
    @media (max-width: 959px){
        div{
            @css(); // detached ruleset call
        }
    }
}

.bp1({width: 186px;}); // passing ruleset to mixin

已编译的输出：

@media (max-width: 959px) {
    div {
        width: 186px;
    }
}

或者，可以将规则集分配给变量，该变量又可以在mixin调用中传递，如下所示。这在编译时也会产生相同的输出。

.bp1(@css){
    @media (max-width: 959px){
        div{
            @css(); // detached ruleset call
        }
    }
}

@ruleset: {width: 186px;};
.bp1(@ruleset);

使用此功能，不仅可以传递属性组，还可以传递选择器（如下所示）：

.bp1(@css){
    @media (max-width: 959px){
        @css(); // detached ruleset call
    }
}

.bp1({
    div{width: 186px;}
    div#header{color: gold;}
});

已编译的输出：

@media (max-width: 959px) {
    div {
        width: 186px;
    }
    div#header {
        color: gold;
    }
}

Answer 2

关于mixins的LESS文档说：“Mixins允许您通过简单地将类名称作为其属性之一将类的所有属性嵌入到另一个类中。它就像变量一样，但对于整个类.Mixins也可以表现得像函数，并带参数，如下面的例子所示。“

在mixin中，除了css属性及其值（由变量表示或表示）之外，你不能拥有任何东西。所以你要做的就是无效。

发送属性作为mixin的参数

2 个答案: