Less 少混入：如何循环传递的参数

我通常写SASS，但对于一个特定的项目，我必须少用

我如何使用更少的资源实现以下目标？使用SASS，MIXIN可以被称为“包含对齐（Healtop top）），将元素水平地放置在中间和顶部。

@mixin align($styles) {
  position: absolute;
  content: '';
  display: block;

  @each $style in $styles {

      @if ($style == center) {
          margin-left: auto;
          margin-right: auto;
          margin-top: auto;
          margin-bottom: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
      }
      @if ($style == hcenter) {
          margin-left: auto;
          margin-right: auto;
          left: 0;
          right: 0;
      }
      @if ($style == vcenter) {
          margin-top: auto;
          margin-bottom: auto;
          top: 0;
          bottom: 0;
      }
      @if ($style == top) {
          top: 0;
      }
      @if ($style == bottom) {
          bottom: 0;
      }
      @if ($style == right) {
          right: 0;
      }
      @if ($style == left) {
          left: 0;
      }

    }

}

---

我不确定你的每个循环。例如

（居中，顶部；）

将设置

顶部：0两次？
但你可以试试：

.align(@styles){
.setproperties(@iterator:1) when (@iterator <= length(@styles)) {

    @style: extract(@styles,@iterator);

    & when (@style = center) {
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    & when (@style = hcenter)
    {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }
    // add more & when 's here

    .setproperties((@iterator + 1));
}
position: absolute;
content: '';
display: block;
.setproperties();
}

看，还有

使用类似代码段的内容，可以将代码段转换为以下内容：

@import "loops/for";

#usage {
    .align(hcenter, top, bottom, etc);
}

.align(@styles...) {
    position: absolute;
    content:  '';
    display:  block;

    .for(@styles); .-each(@style) {
        & when (@style = center) {
            margin-left:   auto;
            margin-right:  auto;
            margin-top:    auto;
            margin-bottom: auto;
            left:   0;
            right:  0;
            top:    0;
            bottom: 0;
        }
        & when (@style = hcenter) {
            margin-left:   auto;
            margin-right:  auto;
            left:   0;
            right:  0;
        }
        & when (@style = vcenter) {
            margin-top:    auto;
            margin-bottom: auto;
            top:    0;
            bottom: 0;
        }
        & when (@style = top) {
            top:    0;
        }
        & when (@style = bottom) {
            bottom: 0;
        }
        & when (@style = right) {
            right:  0;
        }
        & when (@style = left) {
            left:   0;
        }
    }
}

---
实际上，上述代码可以优化为更紧凑：

.align(@styles...) {
    position: absolute;
    content:  '';
    display:  block;

    .center(@pos) {
        margin-@{pos}: auto;
        @{pos}: 0;
    }

    .for(@styles);
        .-each(center)  {.-each(hcenter); .-each(vcenter)}
        .-each(hcenter) {.center(left); .center(right)}
        .-each(vcenter) {.center(top); .center(bottom)}
        .-each(@style)  when (default()) {@{style}: 0}
}

尽管这样，对于一个不太熟悉的人来说，它可能看起来更令人困惑。
相关问题-前一个问题是关于SASS到较少转换的问题。顺便说一句，Bass，我注意到你最近停止了对你的Less代码的应用。这是因为什么原因，还是因为复制粘贴的问题？（这些很难理解。）@seven Phase max，谢谢你的反馈。我保证会表现得更好，更加关注它。我非常喜欢第二个版本。虽然正如你所说，初学者需要时间去理解。
.align(@styles...) {
    position: absolute;
    content:  '';
    display:  block;

    .center(@pos) {
        margin-@{pos}: auto;
        @{pos}: 0;
    }

    .for(@styles);
        .-each(center)  {.-each(hcenter); .-each(vcenter)}
        .-each(hcenter) {.center(left); .center(right)}
        .-each(vcenter) {.center(top); .center(bottom)}
        .-each(@style)  when (default()) {@{style}: 0}
}