Css 较少混合中的条件参数 问题

我创建了以下mixin：

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

现在，这正是我想要的。我遇到的问题是，有时我想声明一个

@mb

值，但很多时候我不会。在这些情况下，我希望回退到每个

@style

参数的预定义值

例如：

• 对于

  hero

  ，

  @mb

  默认为

  边距底部：1.25rem

• 对于

  页面

  ，

  @mb

  默认为

  页边距底部：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;
}

---

如何创建此混音？类似以下内容：

.type(@style; @mb: '') {
    & when (@style = hero) {
      font-size: 42px;              // 42px
      line-height: 52px;       // 52px

      & when not (@mb = '') { margin-bottom: @mb; }
      & when (@mb = '') { margin-bottom: 1.25rem; }
    }

    & when (@style = footer) {
      font-size: 22px;              // 42px
      line-height: 32px;       // 52px

      & when not (@mb = '') { margin-bottom: @mb; }
      & when (@mb = '') { margin-bottom: 1.125rem; }
    }
}

.sample-class-1 { .type(hero); }
.sample-class-2 { .type(hero,0); }
.sample-class-3 { .type(hero,3rem); }


.sample-class-4 { .type(footer); }
.sample-class-5 { .type(footer,0); }
.sample-class-6 { .type(footer,3rem); }

应编译为：

.sample-class-1 {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 1.25rem;
}
.sample-class-2 {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 0;
}
.sample-class-3 {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 3rem;
}
.sample-class-4 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 1.125rem;
}
.sample-class-5 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 0;
}
.sample-class-6 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 3rem;
}

类似这样的内容：

.type(@style; @mb: '') {
    & when (@style = hero) {
      font-size: 42px;              // 42px
      line-height: 52px;       // 52px

      & when not (@mb = '') { margin-bottom: @mb; }
      & when (@mb = '') { margin-bottom: 1.25rem; }
    }

    & when (@style = footer) {
      font-size: 22px;              // 42px
      line-height: 32px;       // 52px

      & when not (@mb = '') { margin-bottom: @mb; }
      & when (@mb = '') { margin-bottom: 1.125rem; }
    }
}

.sample-class-1 { .type(hero); }
.sample-class-2 { .type(hero,0); }
.sample-class-3 { .type(hero,3rem); }


.sample-class-4 { .type(footer); }
.sample-class-5 { .type(footer,0); }
.sample-class-6 { .type(footer,3rem); }

应编译为：

.sample-class-1 {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 1.25rem;
}
.sample-class-2 {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 0;
}
.sample-class-3 {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 3rem;
}
.sample-class-4 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 1.125rem;
}
.sample-class-5 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 0;
}
.sample-class-6 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 3rem;
}

---

只需对每个样式集进行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.

参考号：

---

只需对每个样式集进行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.

参考号：

---

超负荷警告。请参阅我对另一个答案的注释中的代码。@最多七个阶段此答案与您提供的要点有何不同？似乎是同样的想法。@Hynes同样的想法-代码减少3倍（甚至不包括可读性）。@seven Phase max您应该将您的示例作为答案发布，然后再发布Overfloat警告。请参阅我对另一个答案的注释中的代码。@最多七个阶段此答案与您提供的要点有何不同？似乎是同样的想法。@Hynes同样的想法-代码减少3倍（甚至不包括可读性）。@seven Phase max您应该将您的示例作为答案发布