css - LESS 在 mixin 中重复选择器声明

Question

我正在尝试为某些表格行声明背景图像图标:

.i(@file:'file.png', @type) {
    &.@{type} {
      td:first-child {
        background-image: url('../img/@{file}');
      }
    }
  }

我希望能够一次传入多种图像类型:

.i('code.png', 'asp, php, rb, py')

并让它有效地做到这一点:

.i(@file:'file.png', @type) {
  &.@{type1},
  &.@{type2},
  &.@{type3},
  &.@{type4}, {
    td:first-child {
      background-image: url('../img/@{file}');
    }
  }
}

我知道 CSS 输出会有所不同，最后一个代码示例用于说明目的。

除了将一堆空选择器声明为占位符之外，关于如何实现这一点有什么想法吗？

Answer 1

为 LESS 1.5 更新

此代码在 LESS 的更高版本中更有效地产生相同的效果，使用 LESS 1.5+ 中可用的更新的 extract() 和 length() 函数。输出将与原始示例相同。

.i(@file:'file.png', @types) {

  //find length to make the stop point
  @stopIndex: length(@types);

  //set up our LESS loop (recursive)
  .loopTypes (@index) when (@index =< @stopIndex) {
    @class: extract(@types,@index);
    //print the CSS
    &.@{class} {
        td:first-child {
          background-image: url('../img/@{file}');
        }
      }

        // next iteration
        .loopTypes(@index + 1);
    }

    // "call" the loopingClass the first time getting first item
    .loopTypes (1);
}

.myClass {
  .i('code.png'; asp, php, rb, py;);
}

在 LESS 1.3.3 中使用循环和内联 Javascript

这花了几个小时才想出(不，我没有很多空闲时间来研究它，我只是无可救药地上瘾了......)。花费时间最长的部分之一是弄清楚为什么当我返回数组的 .length 时我的 @stopIndex 没有被 LESS 视为数字，并且抛出类型错误。我终于发现我需要使用 LESS 的 unit() 函数明确告诉它把它看成一个数字。

该解决方案利用了这些来源的一般概念:

1. LESS looping
2. Javascript functions in LESS

少

.i(@file:'file.png', @type) {
  //find length to make the stop point
  @stopIndex: unit(`(function(){ return @{type}.split(",").length})()`);
  //need to get the first item in @type
  @firstClass: ~`(function(){ 
      var clsArray = @{type}.replace(/\s+/g, '').split(",");   
      return clsArray[0]; 
    })()`;

  //set up our LESS loop (recursive)
  .loopTypes (@index, @captureClass) when (@index < @stopIndex) {
    @nextClass: ~`(function(){ 
      var clsArray = @{type}.replace(/\s+/g, '').split(",");
      //don't let it try to access past array length
      if(@{index} < (@{stopIndex} - 1)) {
       return clsArray[@{index} + 1]; 
      } 
      else { return '' }
    })()`;

    //print the CSS
    &.@{captureClass} {
        td:first-child {
          background-image: url('../img/@{file}');
        }
      }

        // next iteration
        .loopTypes(@index + 1, @nextClass);
    }

    // define guard expressoin to end the loop when past length
    .loopTypes (@stopIndex, @captureClass) {}

    // "call" the loopingClass the first time getting first item
  .loopTypes (0, @firstClass);
}

.myClass {
  .i('code.png', 'asp, php, rb, py');
}

CSS 输出

.myClass.asp td:first-child {
  background-image: url('../img/code.png');
}
.myClass.php td:first-child {
  background-image: url('../img/code.png');
}
.myClass.rb td:first-child {
  background-image: url('../img/code.png');
}
.myClass.py td:first-child {
  background-image: url('../img/code.png');
}