LESS 是一种动态样式语言，它为 CSS 添加了许多功能和特性。其中之一就是循环语句。循环语句可以让我们更方便地生成复杂的样式代码，减少代码的冗余和重复。在本文中，我们将详细讨论 LESS 中的循环语句，并给出一些示例代码来说明其用法和指导意义。
循环语句的基本语法
LESS 中的循环语句包括两种类型：for 循环和while 循环。它们的基本语法分别如下：
// javascriptcn.com 代码示例
// for 循环语法
@for @var from @start to @end {
// 循环体
}
// while 循环语法
@while @condition {
// 循环体
}其中，@var 是循环变量，@start 和 @end 是循环的开始和结束值，@condition 是循环条件。循环体是需要重复执行的代码块。
for 循环的用法
for 循环可以让我们重复执行一段代码块，并在每次执行时更新循环变量的值。这样就可以生成一系列不同的样式代码。for 循环的基本用法如下：
// 生成一组不同的颜色
@for @i from 1 to 5 {
.color-@{i} {
background-color: #0000@{i}0;
}
}在上面的例子中，我们使用了 for 循环来生成一组不同的颜色。循环变量 @i 的值从 1 开始，每次循环增加 1，直到达到 5。在循环体中，我们使用了 @i 来生成不同的类名和背景颜色。生成的样式代码如下：
// javascriptcn.com 代码示例
.color-1 {
background-color: #000010;
}
.color-2 {
background-color: #000020;
}
.color-3 {
background-color: #000030;
}
.color-4 {
background-color: #000040;
}除了基本用法之外，for 循环还可以嵌套使用，以生成更复杂的样式代码。例如，我们可以使用嵌套的 for 循环来生成一个网格布局：
// javascriptcn.com 代码示例
// 生成一个网格布局
@grid-columns: 12;
@grid-gutter: 20px;
.grid {
display: flex;
flex-wrap: wrap;
}
@for @i from 1 to @grid-columns {
.col-@{i} {
flex: 0 0 calc((100% - (@grid-gutter * (@grid-columns - 1))) / @grid-columns);
margin-right: @grid-gutter;
&:last-child {
margin-right: 0;
}
}
}在上面的例子中，我们使用了两个嵌套的 for 循环来生成一个网格布局。外层循环控制列数，内层循环控制每一列的样式。我们使用了 LESS 的变量和计算功能来计算列的宽度和间距。生成的样式代码如下：
// javascriptcn.com 代码示例
.grid {
display: flex;
flex-wrap: wrap;
}
.col-1 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-2 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-3 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-4 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-5 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-6 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-7 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-8 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-9 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-10 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-11 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 20px;
}
.col-12 {
flex: 0 0 calc((100% - (20px * (12 - 1))) / 12);
margin-right: 0;
}while 循环的用法
while 循环可以让我们重复执行一段代码块，直到满足特定的条件为止。这样就可以生成动态的样式代码。while 循环的基本用法如下：
// javascriptcn.com 代码示例
// 生成一个递减的字体大小列表
@font-size: 20px;
@while @font-size > 10px {
.font-size-@{font-size} {
font-size: @font-size;
}
@font-size: @font-size - 2px;
}在上面的例子中，我们使用了 while 循环来生成一个递减的字体大小列表。循环条件是 @font-size 大于 10px。在循环体中，我们使用了 @font-size 来生成不同的类名和字体大小。生成的样式代码如下：
// javascriptcn.com 代码示例
.font-size-20px {
font-size: 20px;
}
.font-size-18px {
font-size: 18px;
}
.font-size-16px {
font-size: 16px;
}
.font-size-14px {
font-size: 14px;
}
.font-size-12px {
font-size: 12px;
}除了基本用法之外，while 循环还可以与其他 LESS 特性结合使用，以生成更复杂的样式代码。例如，我们可以使用 while 循环和 mixin 来生成一个递增的动画效果：
// javascriptcn.com 代码示例
// 生成一个递增的动画效果
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spin(@i) when (@i > 0) {
.spin-@{i} {
animation: spin @i * 0.1s linear infinite;
}
.spin(@i - 1);
}
.spin(10);在上面的例子中，我们使用了 while 循环和 mixin 来生成一个递增的动画效果。我们使用了 LESS 的 when 语句来控制 mixin 的递归调用，生成不同的类名和动画时间。生成的样式代码如下：
// javascriptcn.com 代码示例
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spin-10 {
animation: spin 1s linear infinite;
}
.spin-9 {
animation: spin 0.9s linear infinite;
}
.spin-8 {
animation: spin 0.8s linear infinite;
}
.spin-7 {
animation: spin 0.7s linear infinite;
}
.spin-6 {
animation: spin 0.6s linear infinite;
}
.spin-5 {
animation: spin 0.5s linear infinite;
}
.spin-4 {
animation: spin 0.4s linear infinite;
}
.spin-3 {
animation: spin 0.3s linear infinite;
}
.spin-2 {
animation: spin 0.2s linear infinite;
}
.spin-1 {
animation: spin 0.1s linear infinite;
}总结
循环语句是 LESS 中非常有用的特性之一。它可以让我们更方便地生成复杂的样式代码，减少代码的冗余和重复。在本文中，我们详细讨论了 LESS 中的循环语句的基本语法和用法，并给出了一些示例代码来说明其深度和学习以及指导意义。希望本文对你有所帮助，能够在你的前端开发工作中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e665095b1f8cacd793703