LESS mixin：如何遍历传入的参数

Posted 2023-03-15

【中文标题】LESS mixin：如何遍历传入的参数

【英文标题】：LESS mixin: How to loop through passed in arguments

【发布时间】：2014-12-22 12:34:06

【问题描述】：

我通常写 SASS，但对于特定项目我必须使用 LESS。

如何使用 less 实现类似以下的效果？使用 sass 可以像 @include align(hcenter top) 一样调用 mixin 来将元素水平定位在中间和顶部。

@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;
      

    

【问题讨论】：

相关问题 - ***.com/questions/26163660/…

上一个是用于 SASS 到 Less 的转换。参考this在Less中循环。

【参考方案1】：

请参阅Mixin Arguments、List Functions 和 Loops。

使用"for" 之类的东西，sn-p 可以转换为：

@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

虽然这种方式对于不太熟悉 Less 的人来说可能看起来更加混乱。

【讨论】：

我非常喜欢第二个版本。虽然正如您所说的那样，初学者需要时间才能理解。

【参考方案2】：

我不确定您的每个循环。例如(center, top;) 将设置top: 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();

上面可以调用：

selector1 
    .align(center;);

selector2 
    .align(center hcenter;);

【讨论】：

顺便说一句，Bass，我最近注意到您停止为您的 Less 代码应用任何意图。这是有什么具体原因还是只是一些复制粘贴问题？ （那些很难阅读）。

@seven-phases-max，感谢您的反馈。我保证会表现得更好并更加关注它