css - 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)

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