使用LESS中的循环语句创建动态列表和迭代输出

2023-09-20 19:52:34

LESS中的循环语句

LESS提供了一个名为“loop”的循环语句，它允许您对一组数据进行迭代。loop语句的基本语法如下：

.loop (@variable, from, to) {
  // 循环体
}

@variable ：循环变量，用于在循环体内访问当前迭代的数据项。
from ：循环起始值。
to ：循环结束值。

在循环体内，您可以使用@variable变量来访问当前迭代的数据项。例如，以下代码将创建一个从1到10的数字列表：

.loop (@i, 1, 10) {
  .item-#{@i} {
    background-color: #ccc;
    padding: 10px;
    margin: 5px;
    display: inline-block;
  }
}

这段代码将生成以下HTML代码：

<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
<div class="item-10">10</div>

计算

在循环中，您可以使用计算来生成循环变量的值。例如，以下代码将创建一个从1到10的偶数列表：

.loop (@i, 1, 10) {
  @if (@i % 2 == 0) {
    .item-#{@i} {
      background-color: #ccc;
      padding: 10px;
      margin: 5px;
      display: inline-block;
    }
  }
}

这段代码将生成以下HTML代码：

<div class="item-2">2</div>
<div class="item-4">4</div>
<div class="item-6">6</div>
<div class="item-8">8</div>
<div class="item-10">10</div>

嵌套循环

您还可以在LESS中嵌套循环。例如，以下代码将创建一个10行10列的表格：

.loop (@i, 1, 10) {
  .row-#{@i} {
    .loop (@j, 1, 10) {
      .cell-#{@i}-#{@j} {
        background-color: #ccc;
        padding: 10px;
        margin: 5px;
        display: inline-block;
      }
    }
  }
}

这段代码将生成以下HTML代码：

<div class="row-1">
  <div class="cell-1-1">1</div>
  <div class="cell-1-2">2</div>
  <div class="cell-1-3">3</div>
  <div class="cell-1-4">4</div>
  <div class="cell-1-5">5</div>
  <div class="cell-1-6">6</div>
  <div class="cell-1-7">7</div>
  <div class="cell-1-8">8</div>
  <div class="cell-1-9">9</div>
  <div class="cell-1-10">10</div>
</div>
<div class="row-2">
  <div class="cell-2-1">11</div>
  <div class="cell-2-2">12</div>
  <div class="cell-2-3">13</div>
  <div class="cell-2-4">14</div>
  <div class="cell-2-5">15</div>
  <div class="cell-2-6">16</div>
  <div class="cell-2-7">17</div>
  <div class="cell-2-8">18</div>
  <div class="cell-2-9">19</div>
  <div class="cell-2-10">20</div>
</div>
<!-- 省略代码 -->