css - 发送属性作为 mixin 的参数

Question

我想打破我所有的媒体查询并将 CSS 属性作为参数传递。

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

.bp1(width: 186px;);

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

Answer 1

从 Less v1.7.0 开始，可以将分离的规则集作为参数传递给 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 属性及其值（由变量声明或表示）之外，您不能拥有任何东西。所以你试图做的事情是无效的。