Question

我想在LESS，CSS中创建一个函数。该函数应该在这里执行：

.col{
    .run-the-function();
    }

问题是：例如，我希望该函数影响每个第三个孩子。

.test(@columns, @top-margin, @right-margin){
&:nth-child(@columns * n + 0 ){

}
}

内容：当函数执行时，每三个，第二个，第四个元素或任何你设置的元素，该元素将获得一个红色边框。

你有什么想法吗？这有可能吗？

由于

Answer 1

我认为这会起作用

.test(@columns, @top-margin, @right-margin){
    &:nth-child(@{columns}n){

    }
}

有关第n个孩子的更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

这有效......

输出是基于各种＆＃34; nth＆＃34;的交替行。值。我很快就会在这里发布一张图片。

标记式：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <link rel="stylesheet" href="/Content/test.css" />
</head>
<body>
   <div class="alt-rows every-3rd">
      <div>Test 1</div>
      <div>Test 2</div>
      <div>Test 3</div>
      <div>Test 4</div>
      <div>Test 5</div>
      <div>Test 6</div>
   </div>
   <br/>
   <div class="alt-rows every-2nd">
      <div>Test 1</div>
      <div>Test 2</div>
      <div>Test 3</div>
      <div>Test 4</div>
      <div>Test 5</div>
      <div>Test 6</div>
   </div>
</body>
</html>

减：

@bg: white;
@alt-bg: gray;

.altRows(@nth-row) {
   background-color: @bg;
   div:nth-child(@{nth-row}n+1) {
      background-color: @alt-bg;
   }
}   

.alt-rows {
   &.every-2nd {
      .altRows(2);
   }

   &.every-3rd {
      .altRows(3);
   }
}

用nth-child创建mixin

2 个答案: