css - LESS mixin 中的条件参数

Question

问题

我创建了以下混入:

.type(@style;@mb) {
    & when (@style = hero) {
        margin-bottom: @mb;
        font-size: 2.625rem;
        line-height: 1.238095238;
    }
}

现在这主要是我想要的。我遇到的问题是有时我想声明一个 @mb 值，但很多时候我不会。在这些情况下，我将希望回退到每个 @style 参数的预定值。

例如:

• 对于hero，@mb默认为margin-bottom: 1.25rem;
• 对于页面，@mb默认为margin-bottom: 1.125rem;
• 等等

---

期望的结果

期望的结果如下:

.sample-class-01 { .type(hero); }
.sample-class-02 { .type(page,0); }

我会得到以下输出:

.sample-class-01 { 
    margin-bottom: 1.25rem;
    font-size: 2.625rem;
    line-height: 1.238095238;
}
.sample-class-02 {
    margin-bottom: 0;
    font-size: 2rem;
    line-height: 1.3125;
}

---

我如何创建这个 mixin？

Answer 1

只需为每个样式集进行 mixin 特化/重载:

.type(hero, @mb: 1.25rem) {
    margin-bottom: @mb;
    font-size: 2.625rem;
    line-height: 1.238095238;
}

.type(not-a-hero, @mb: 2.22rem) {
    margin-bottom: @mb;
    font-size: 3.333rem;
    line-height: 4.444444444;
}

// etc.

引用:

• > Argument Pattern-matching
• > Mixins with Multiple Parameters