Less中基于颜色的条件逻辑

Question

我有以下使用 Less 的 mixin，它采用输入颜色和阴影一些框等。我使用颜色的浅色版本作为边框，但有时我发现我的颜色太浅，所以最终变成白色。我想做的是检查变亮的颜色是否为白色（或 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

坚持现有的，并升级到 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 函数，可根据第三种颜色亮度有条件地选择两种颜色值之一。例如：

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

        // etc.
    }
}

注意contrast内部使用luma而不是lightness所以这个sn-p不完全等于你的初始代码（我上面使用的10%阈值大致类似于80%灰度的亮度阈值阴影）。

提示 #1：Mixin 参数名称。

通常，您不必为 mixin 参数使用如此具体的“完全限定”名称。因为@section-base-color 是.sectionstyles mixin 的参数而不是全局变量，所以section 前缀在那里有些多余。 .sectionstyles 上下文中的 @base-color（如我上面使用的）自然应该表示 section styles base color。我们不必在不必要的时候那么冗长。

提示 #2：“点亮之轻”。

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

替代。解决方案 #2：条件 mixins。

虽然& 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.
    }
}

条件 mixin 在这里击败了条件 &，因为即使仍然非常冗长，我们也不需要重复 border: ...、lightness(...) 和 80% 两次（即以更易于维护的代码完成）。