Question

我有以下mixin使用Less，它采用输入颜色和阴影几个框等。我使用颜色的减轻版本的边框，但有时我发现我的颜色太亮，所以最终为白色。我想做的是检查减轻的颜色是否为白色（或80％）并使其成为传入的默认颜色。我已将我的when语句用于在颜色之间切换但我得到一个NameError变量@ section-base-color未定义。我不确定如何使用它来处理传入的参数。

.sectionstyles(@section-base-color) {
    .product-single {

        & when (lightness(lighten(@section-base-color, 45%)) > 80%) {
            border: 1px solid @section-base-color;

        }
        & when (lightness(lighten(@section-base-color, 45%)) <= 80%) {
            border: 1px solid lighten(@section-base-color, 45%);            }
        .clearfix;
        a {
            margin-top: 0;
            color: @section-base-color;

            h2 {
                margin: 0 (-@padding-base-horizontal);
                padding: @padding-base-horizontal;
                color: @section-base-color;
            }
            p {
                color: @text-color;
            }
            &:hover, &:focus {
                color: #FFF;
                h2 {
                    background-color: @section-base-color;
                    color: #FFF;
                }

            }
        }

    } 
}

供参考，功能轻巧，不轻盈。这导致我出了问题。

Answer 1

选项1：少升级

坚持你所拥有的，并升级到LESS 1.7。

选项2：在mixin

中明确设置变量

这适用于LESS 1.6：

.sectionstyles(@section-base-color-input) {
    @section-base-color: @section-base-color-input;
    etc... (rest of code the same)

& when语法中有关于查看1.6中的mixin参数的错误，但如果您使用该参数在mixin中显式设置局部变量，则该变量可按预期方式访问。

Answer 2

稍微偏离主题的答案（@ScottS已经回答了实际问题），只是提供了一些关于“条件色彩逻辑”的提示/提示，以满足主题标题。

替代。解决方案＃1：对比度。

在色彩亮度方面，Less具有contrast功能，可根据第三种颜色亮度有条件地选择两种颜色值中的一种。 E.g：

.sectionstyles(@base-color) {
    .product-single {
        border: 1px solid
            contrast(@base-color, @base-color, 
                lighten(@base-color, 45%), 10%);

        // etc.
    }
}

请注意，contrast内部使用luma而非lightness，因此此代码段与您的初始代码不完全相同（我上面使用的10%阈值大致类似于{{ 1}}灰度的亮度阈值。）

提示＃1：Mixin参数名称。

通常，您不必为mixin参数使用如此特定的“完全限定”名称。由于80%是@section-base-color mixin的参数而不是全局变量，因此.sectionstyles前缀在某种程度上是多余的。在section的上下文中，仅@base-color（如上所述）自然应该是.sectionstyles。在没有必要的时候，我们不必那么冗长。

提示＃2：“轻盈之光”。

section styles base color可以简化为lightness(lighten(@section-base-color, 45%)) > 80%（其中lightness(@section-base-color) > 35%为35%，即亮度通道的算术加法是80% - 45%的作用。

替代。解决方案＃2：条件混合。

虽然lighten与一般的条件mixin相比可能被视为最明显且更简洁的方法，但在许多情况下并非总是如此：

& when

条件混合在这里胜过条件.sectionstyles(@base-color) { .product-single { border: 1px solid @border-color; .-() {@border-color: lighten(@base-color, 45%)} .-(); .-() when (lightness(@base-color) > 35%) { @border-color: @base-color; } // etc. } }，即使仍然非常冗长，我们也不需要重复&，border: ...和lightness(...)两次（即完成更多可维护的代码）。

基于颜色的条件逻辑

2 个答案: