LESS CSS是否可以在变量中存储多个参数？

debugcn 发表于 Dev

布莱恩·唐宁（Bryan Downing）

我希望以下mixin了解我想传递多个参数而不是3px, 0, 0, 3px用作单个参数。

注意：我确实意识到我可以@myRadius: 3px做到.border-radius( @myRadius, 0, 0 @myRadius );。我只是不想。

示例代码（粘贴到LESSTESTER中以查看输出）：

.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
     -webkit-border-top-right-radius: @topright;
  -webkit-border-bottom-right-radius: @bottomright;
   -webkit-border-bottom-left-radius: @bottomleft;
      -webkit-border-top-left-radius: @topleft;

     -moz-border-radius-topright: @topright;
  -moz-border-radius-bottomright: @bottomright;
   -moz-border-radius-bottomleft: @bottomleft;
      -moz-border-radius-topleft: @topleft;

     border-top-right-radius: @topright;
  border-bottom-right-radius: @bottomright;
   border-bottom-left-radius: @bottomleft;
      border-top-left-radius: @topleft;
}

@myRadius: 3px, 0, 0, 3px;

div {
    .border-radius( @myRadius );
}

七相最大

简而言之：不，目前这是不可能的（变量总是作为一个mixin参数使用）。（“实参扩展列表”功能实际上已实现，可能会在Less 2.0中出现，但需要一些支持，请参阅＃ 1857-不要犹豫了+1）。

解决方法：

1个

您可以通过混入专用化来创建“智能参数处理”（请参阅模式匹配）。例如（1.6及以下）：

.border-radius(@tr: 0, @br: 0, @bl: 0, @tl: 0) when (default()) {
    border-top-right-radius:    @tr;
    border-bottom-right-radius: @br;
    border-bottom-left-radius:  @bl;
    border-top-left-radius:     @tl;
}

.border-radius(@values) when (length(@values) = 4) {
    .border-radius(
        extract(@values, 1),
        extract(@values, 2),
        extract(@values, 3),
        extract(@values, 4));
}

// you also have to provide specializations for
// (length(@values) = 2) and (length(@values) = 3)
// cases if you need to handle them

// ...............................................
// usage:

@myRadius: 3px, 0, 0, 3px;

a {
    .border-radius(1px, 2px);
}

b {
    .border-radius(@myRadius);
}

2个

与上述相同，只是冗长的变体少了（Less 1.5+）：

.border-radius(@values...) {
    .-() {@tr: 0; @br: 0; @bl: 0; @tl: 0} .-();
    .-() when (length(@values) > 0) {@tr: extract(@values, 1)}
    .-() when (length(@values) > 1) {@br: extract(@values, 2)}
    .-() when (length(@values) > 2) {@bl: extract(@values, 3)}
    .-() when (length(@values) > 3) {@tl: extract(@values, 4)}

    border-top-right-radius:    @tr;
    border-bottom-right-radius: @br;
    border-bottom-left-radius:  @bl;
    border-top-left-radius:     @tl;
}

// ...............................................
// usage:

@myRadius: 3px, 0, 0, 3px;

a {.border-radius(1)}
b {.border-radius(1, 2)}
c {.border-radius(1, 2, 3)}
d {.border-radius(1, 2, 3, 4)}
e {.border-radius(1 2 3 4)}
f {.border-radius(@myRadius)}
// etc.

3

这不是一种解决方法，而是“以防万一”的说法，如果用例仅限于基本CSS属性，则是否真的需要默认值0而不是实际CSS“默认值”（即为什么我们需要.border-radius(1, 2)扩展为border-radius: 1 2 0 0;而不是border-radius: 1 2;？）。相反，我希望混合遵循CSS语法，这样它可以很简单：

.border-radius(@values...) {
    // ...
    border-radius: @values;
}

// ...............................................
// usage:

@myRadius: 3px 0 0 3px; // no commas here

a {.border-radius(1)}
b {.border-radius(1, 2)}
c {.border-radius(1, 2, 3)}
d {.border-radius(1, 2, 3, 4)}
e {.border-radius(1 2 3 4)}
f {.border-radius(@myRadius)}

PS并且像往常一样：如果此类用例仅限于供应商前缀，请考虑在构建链中添加自动前缀工具，以免浪费您的时间来编写这些供应商化的预处理器混合器（另请参见参考资料）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。