如何在 LESS 中创建循环结构

htmlweb developmentfront end technology更新于 2024/3/21 18:52:17

概述

循环使我们的代码简洁，并有助于多次运行相同的代码行。这使得代码无需多次编写相同的代码行。因此，要对多个容器和对象设置相同的样式，只需编写一行代码并多次重复相同的样式属性即可。为了解决这个问题，Leaner Style Sheets (LESS) 提供了循环功能，使用它我们可以提高代码的可读性，并节省开发人员编写大量样式属性代码的时间。

语法

在 Leaner Style Sheets (LESS) 中使用循环的语法是 -

.functionName (@variableName) when  (terminationCondition) {
   .selector{
      font-size : (18px * @variable);
      color:green
   }
   .functionName(decrement/increment);
}

函数名称− 函数名称可由开发者自定义。
变量名称− 变量名称也可由开发者自定义。LESS 预处理器中的变量名称以"@"为前缀。例如:@name、@width、@height、@border 等。
选择器− 循环内的选择器是循环中动态设置样式的类、ID 和标签。
增量/减量− 这些是条件属性，取决于开发者想要执行任务的情况。
终止条件− 循环停止的条件。假设终止条件设置为变量大于 0，并且变量递减，因此当变量值等于或小于 0 时，循环将终止。

算法

步骤 1 − 在任何文本编辑器中创建 HTML 样板文件。添加一些带有类名的元素。

步骤 2 − 将样式表链接到 HTML 页面，链接名为"style.css"。

<link rel="stylesheet" href="style.css">

步骤 3 − 在同一文件夹中创建一个"style.less"文件，并使用上述语法创建一个循环，其中包含用户定义的函数名和变量名。

步骤 4 - 添加终止条件，因为当变量值小于 0 时循环终止。

步骤 5 - 现在继承需要反映样式的样式组件。如果类名相同但数值发生变化，则可以使用当前变量值并将其与类名连接起来。

步骤 6 - 减少变量的当前值。使循环达到终止条件。如果不执行此步骤，则循环将采用当前值并仅反映一次更改。

fsize (@variable) when (@variable > 0) {
   .space@{variable} {
      font-size : (18px * @variable);
      color:green
   }
   .fsize(@variable - 1);
}

步骤 7− 循环结束后，调用函数并传递值。

.fsize(3);

步骤 8− 打开终端，使用"cd"命令更改目录，到达当前文件夹。

步骤 9 − 使用以下命令编译 less 文件。

lessc style.less > style.css

步骤 10 − 现在 LESS 文件已编译并转换为"style.css"。

步骤 11 − 输出可在浏览器中查看。

示例

在给定的示例中，我们创建了一个简单的 HTML 页面，其中包含几个 HTML div 标签。在 style.less 文件中，我们创建了一个循环，通过该循环迭代 styling 属性，该属性反映了所选的特定选择器(即类名)。在下面给出的 style.less 代码中，我们考虑了一个 fsize() 函数，该函数将变量作为参数传递。在循环中，我们使用了递归属性，当变量的值小于或等于 0 时，该属性终止。

<html>
<head>
   <link rel="stylesheet" href="style.css">
   <title>LESS Loops</title>
   <style>
      .space3 {
      font-size: 54px;
         color: green;
      }
      .space2 {
         font-size: 36px;
         color: green;
      }
      .space1 {
         font-size: 18px;
         color: green;
      }
      .fsize (@variable) when (@variable > 0) {
         .space@{variable} {
            font-size : (18px * @variable);
            color:green
         }
         .fsize(@variable - 1);
      }
      .fsize(3);
   </style>   
</head>
<body>
   <div class="space1">tutorialspoint.com</div>
   <div class="space2">tutorialspoint.com</div>
   <div class="space3">tutorialspoint.com</div>
</body>
</html>

为了将样式反映到主页，我们必须将 style.less 样式表转换为 style.css，因为 style.css 样式表与索引页链接。要进行转换，我们需要一个 Less 编译器，它将给定的 Less 文件编译为 CSS。现在打开终端并进入 style.less 文件夹，使用下面给出的 Less 编译器命令。

使用上述命令，Less 文件将被编译并转换为层叠样式表 (CSS)，从而改变页面的样式。下面的 style.css 代码是上述编译的 Less 文件的结果，其中包含循环。

下图包含上述示例的输出，其中包含三个 div 容器，其中包含文本。因此，当在 Less 文件中调用该函数时，循环开始，并用值 3 初始化变量。当样式属性 style 获取到该值时，它会计算字体大小并使用相同的颜色名称进行相应更改。然后，变量的值减 1，再设置为 2，重复相同的过程，直到变量的值小于或等于 0。当变量的值等于 0 时，循环终止。使用 lessc 编译器编译时，它会将更改反映到 CSS 页面，进而将样式反映到主索引页。