LESS 中的条件语句和循环语句详解-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它可以让我们写出更加简洁、易于维护的 CSS 代码。除了基本的变量、混合器和嵌套规则等功能外，LESS 还支持条件语句和循环语句，可以帮助我们更加高效地编写前端代码。

条件语句

在 LESS 中，我们可以使用 if、else if 和 else 关键字来创建条件语句。它们的语法如下：

// javascriptcn.com 代码示例
// if 语句
@if (condition) {
  // code to execute if condition is true
}

// if-else 语句
@if (condition) {
  // code to execute if condition is true
} else {
  // code to execute if condition is false
}

// if-else if-else 语句
@if (condition1) {
  // code to execute if condition1 is true
} else if (condition2) {
  // code to execute if condition2 is true
} else {
  // code to execute if all conditions are false
}

其中，condition 表示一个表达式，可以是任何返回布尔值的表达式。在条件语句中，如果 condition 的值为 true，则执行 if 或 else if 后面的代码块，否则执行 else 后面的代码块（如果有的话）。

下面是一个示例，演示如何使用条件语句来根据不同的屏幕尺寸设置不同的字体大小：

// javascriptcn.com 代码示例
@baseFontSize: 16px;

h1 {
  font-size: @baseFontSize;
  
  @media screen and (max-width: 768px) {
    @if (@baseFontSize > 14px) {
      font-size: @baseFontSize - 2px;
    } else {
      font-size: @baseFontSize;
    }
  }
  
  @media screen and (max-width: 480px) {
    @if (@baseFontSize > 12px) {
      font-size: @baseFontSize - 4px;
    } else {
      font-size: @baseFontSize;
    }
  }
}

在上面的代码中，我们首先定义了一个基准字体大小 @baseFontSize，然后在 h1 元素的样式规则中，使用 @media 查询来根据不同的屏幕尺寸设置不同的字体大小。在每个 @media 查询中，我们使用条件语句来判断当前的字体大小是否大于某个值，如果是，则将字体大小减少一定的像素值，否则保持不变。

循环语句

除了条件语句外，LESS 还支持循环语句，可以帮助我们更加高效地生成重复的样式规则。在 LESS 中，我们可以使用 for 循环和 each 循环来创建循环语句。

for 循环

for 循环是一种基本的循环语句，它的语法如下：

@iterations: 5;

// for 循环
@for @i from 1 to @iterations {
  // code to execute for each iteration
}

其中，@iterations 表示循环的次数，@i 表示当前的迭代次数，可以在循环体内部使用。在循环体内部，我们可以使用 @i 来实现不同的样式规则，从而生成一系列重复的样式规则。

下面是一个示例，演示如何使用 for 循环来生成一系列带有不同颜色的按钮样式：

// javascriptcn.com 代码示例
@buttonCount: 5;

@for @i from 1 to @buttonCount {
  .button-@{i} {
    background-color: lighten(#0074d9, (@i - 1) * 10%);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 10px;
  }
}

在上面的代码中，我们首先定义了一个变量 @buttonCount，表示要生成的按钮数量。然后使用 @for 循环来生成一系列带有不同颜色的按钮样式，其中使用 lighten 函数来计算每个按钮的背景颜色，从而实现渐变效果。

each 循环

除了 for 循环外，LESS 还支持 each 循环，它可以遍历一个列表或一个映射，从而生成一系列样式规则。each 循环的语法如下：

// javascriptcn.com 代码示例
// 遍历列表
@each @var in @list {
  // code to execute for each item
}

// 遍历映射
@each @key, @value in @map {
  // code to execute for each key-value pair
}

其中，@list 表示要遍历的列表，可以是一个逗号分隔的值列表或一个包含多个值的列表变量。@key 和 @value 分别表示当前映射项的键和值，可以在循环体内部使用。

下面是一个示例，演示如何使用 each 循环来生成一系列带有不同背景颜色和字体颜色的标签样式：

// javascriptcn.com 代码示例
@colors: red, blue, green, yellow, orange;
@fonts: Arial, Helvetica, sans-serif;

// 遍历颜色和字体
@each @color in @colors {
  @each @font in @fonts {
    .label-@{color}-@{font} {
      background-color: @color;
      color: lighten(@color, 50%);
      font-family: @font;
      padding: 5px 10px;
      border-radius: 3px;
      display: inline-block;
      margin-right: 10px;
    }
  }
}

在上面的代码中，我们首先定义了两个变量 @colors 和 @fonts，分别表示要遍历的颜色列表和字体列表。然后使用 @each 循环来生成一系列带有不同背景颜色和字体颜色的标签样式，其中使用 lighten 函数来计算每个标签的字体颜色，从而实现互补色的效果。

总结

在本文中，我们介绍了 LESS 中的条件语句和循环语句，包括 if、else if、else 和 for、each 关键字的语法和用法。通过学习这些语句，我们可以更加高效地编写前端代码，减少重复的工作量，提高代码的可维护性和扩展性。希望这篇文章对你有所帮助，谢谢阅读！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656fc8a1d2f5e1655d826429