我可以将 LESS mixins 与 `when` 语句加上伪元素一起使用吗

Question

我可以将 LESS mixin 与when语句加伪元素一起使用吗？我想创建一个 Mixins。合乎逻辑的是，如果原色是白色，那么我需要给出.userBadge:after辅助色。

这是我的 LESS mixins，但似乎不起作用。

    .property-style(@primary-bgcolor, @primary-color, @secondary-bgcolor, @secondary-color) {
        .wrapper {
            background-color: @primary-bgcolor;
        }
        .userBadge:after(@primary-color, @secondary-color) when (@primary-color = "#fff")   {
                background: @secondary-color;
        }  
    }

你能帮忙吗？非常感谢。

Answer 1

你有几个错误：

• 你错过了@前面secondary-color
• Mixin 是类类的.x，而不是任意的选择器。x::after(...)无效 - 你需要x(...) {&::after {...} }
• 你的.property-stylemixin 定义了一个 mixin，但你从来没有调用过那个 mixin
• 你的.userBadgemixin 定义了一个 mixin，但你从来没有调用过那个 mixin
• 在这种情况下"#fff"需要#fff没有引号 - 否则你的颜色必须是"#fff"而不是#fff！:D

这是您所拥有的工作版本（@secondary-bgcolor因为您没有将其用于任何目的，所以我将其遗漏了）[工作演示]

.property-style(@primary-bgcolor, @primary-color, @secondary-color) {

    // `.wrapper` styles
    .wrapper {
        background-color: @primary-bgcolor;
    }

    // define the other mixin. note that we _could_ use the same variable names
    // but they are _new_ variables - I've given them new names to
    // help us remember that they won't automatically inherit the values of the parent mixin
    .myOtherMixin(@primary, @secondary) when (@primary = #fff) {
      background: @secondary
    }

    .userBadge::after {
      .myOtherMixin(@primary-color, @secondary-color)
    }
}

.property-style(#ccc,#fff,#eee); // result:
                                 // .wrapper {background: #ccc;}
                                 // .userBadge::after {background-color: #eee;}

 

然而，嵌套mixin 会变得非常混乱。这会更干净一点[工作演示]

.variableColor(@color, @otherColor) when (@color = #fff) {
  background: @otherColor
}

.property-style(@primary-bgcolor, @primary-color, @secondary-color) {
  .wrapper {
    background-color: @primary-bgcolor
  }
  .userBadge::after {
    .variableColor(@primary-color, @secondary-color)
  }
}

.property-style(#ccc,#fff,#eee); // result:
                                 // .wrapper {background: #ccc;}
                                 // .userBadge::after {background-color: #eee;}

或者，如果该可变颜色混合实际上不需要可重用 [工作演示]

.property-style(@primary-bgcolor, @primary-color, @secondary-color) {
    .wrapper {
        background-color: @primary-bgcolor;
    }
}

.property-style(@primary-bgcolor, @primary-color, @secondary-color) when (@primary-color = #fff) {
    .userBadge::after {
      background: @secondary-color
    }
}

.property-style(#ccc,#fff,#eee); // result:
                                 // .wrapper {background: #ccc;}
                                 // .userBadge::after {background-color: #eee;}

 

但是等等，让我们备份。您没有调用 mixin 的事实，至少在您提供的代码中，让我想知道是否真的需要将整个事情合二为一。如果你真的不需要能够做类似的事情

.property-style(#ccc, #ddd, #eee);
alternate {.property-style(#aaa, #fff, #bbb)}

这个更简单的解决方案（依赖于默认值）可以解决问题[工作演示]

.property-style(#ccc, #ddd, #eee);
alternate {.property-style(#aaa, #fff, #bbb)}

 

奖励：只是为了踢球，这是您可以采取的不同方法。对于您在这里展示的内容来说，这绝对是矫枉过正，但您可能会发现研究它是一件有趣的事情。它使用默认值和属性插值，并使“if”中的颜色成为主题的动态部分。[工作演示]

@primary-bgcolor: #ccc;
@primary-color: #fff;
@secondary-color: #eee;
.badgeBg(@check: @primary-color, @ifPasses: @secondary-color) when (@primary-color = #fff) {
  background: @secondary-color
}
.wrapper {
  background-color: @primary-bgcolor
}
.userBadge::after {
  .badgeBg
}
/*
   result:
   .wrapper {background: #ccc;}
   .userBadge::after {background-color: #eee;}
*/