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

Question

我想分解所有媒体查询并将 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 .

Quoting Less Website:

Detached ruleset is a group of CSS properties, nested rulesets, media declarations or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.

请注意，构成规则集一部分的属性必须包含在 {} 内。此外，在分离规则集调用之后必须使用括号 (())(如 @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;
    }
}