如何在 LESS 中定义嵌套样式-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它提供了许多方便的语法来简化 CSS 的编写。其中一个重要的特性就是嵌套样式。通过嵌套样式，我们可以更方便地定义子元素的样式，避免了重复书写选择器的繁琐。

本文将详细介绍在 LESS 中如何定义嵌套样式，包括基本语法、高级用法和注意事项。

基本语法

在 LESS 中，嵌套样式的语法非常简单，只需要在父元素的选择器后面加上一个花括号即可。例如：

// www.javascriptcn.com code example
.parent {
  color: #333;
  font-size: 16px;

  .child {
    color: #666;
    font-size: 12px;
  }
}

上面的代码定义了一个父元素 .parent 和一个子元素 .child，它们分别设置了不同的颜色和字体大小。在 LESS 编译后，生成的 CSS 代码如下：

// www.javascriptcn.com code example
.parent {
  color: #333;
  font-size: 16px;
}

.parent .child {
  color: #666;
  font-size: 12px;
}

可以看到，LESS 自动将嵌套样式转换成了普通的 CSS 选择器，并添加了父元素的前缀。

除了嵌套样式，LESS 还支持在选择器中使用变量、函数和操作符等高级语法，使得样式的定义更加灵活和可复用。例如：

// www.javascriptcn.com code example
@color: #333;

.parent {
  color: @color;
  font-size: 16px;

  .child {
    color: darken(@color, 20%);
    font-size: 12px;
  }
}

上面的代码定义了一个颜色变量 @color，并在父元素和子元素中使用了它。同时，子元素的颜色还使用了 LESS 内置的 darken 函数，将颜色值变暗了 20%。

高级用法

除了基本语法外，LESS 还支持一些高级用法来进一步简化样式的编写。下面介绍几种常用的高级用法。

& 符号

在 LESS 中，& 符号表示当前选择器的引用。通过 & 符号，我们可以方便地定义同级别和父级别的样式。例如：

// www.javascriptcn.com code example
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;

  &:hover {
    background-color: #f5f5f5;
  }

  &.primary {
    background-color: #007bff;
    color: #fff;

    &:hover {
      background-color: #0069d9;
    }
  }
}

上面的代码定义了一个按钮样式 .btn，它有两个状态：鼠标悬浮和主要样式。通过 &:hover 和 &.primary，我们可以方便地定义这两个状态的样式，而不需要重复书写 .btn 选择器。

~ 符号

在 LESS 中，~ 符号表示相邻兄弟选择器。通过 ~ 符号，我们可以方便地定义相邻兄弟元素的样式。例如：

// www.javascriptcn.com code example
.list {
  li {
    display: inline-block;
    margin-right: 10px;

    &.active {
      font-weight: bold;
    }

    & ~ li {
      color: #999;
    }
  }
}

上面的代码定义了一个列表样式 .list，它包含多个列表项 <li>。通过 &.active，我们可以方便地定义选中状态的样式；而通过 & ~ li，我们可以方便地定义相邻兄弟元素的样式。

{} 符号

在 LESS 中，{} 符号表示属性的块级作用域。通过 {} 符号，我们可以方便地定义多个属性的样式，而不需要重复书写属性名称。例如：

// www.javascriptcn.com code example
.box {
  &-header {
    {
      font-size: 16px;
      font-weight: bold;
      height: 50px;
      line-height: 50px;
    }
  }

  &-body {
    {
      font-size: 14px;
      padding: 10px;
    }
  }
}

上面的代码定义了一个盒子样式 .box，它包含头部和主体两个部分。通过 {} 符号，我们可以方便地定义多个属性的样式，而不需要重复书写属性名称。

注意事项

在使用 LESS 定义嵌套样式时，需要注意以下几点：

嵌套样式不应过深，一般不超过 3 层；
避免出现冗余选择器，尽量使用 & 符号和高级用法；
选择器的顺序应按照 DOM 结构的顺序排列，避免样式覆盖的问题。

示例代码

下面是一个完整的 LESS 示例代码，包含了基本语法和高级用法：

// www.javascriptcn.com code example
@color: #333;

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;

  &:hover {
    background-color: #f5f5f5;
  }

  &.primary {
    background-color: #007bff;
    color: #fff;

    &:hover {
      background-color: #0069d9;
    }
  }
}

.list {
  li {
    display: inline-block;
    margin-right: 10px;

    &.active {
      font-weight: bold;
    }

    & ~ li {
      color: #999;
    }
  }
}

.box {
  &-header {
    {
      font-size: 16px;
      font-weight: bold;
      height: 50px;
      line-height: 50px;
    }
  }

  &-body {
    {
      font-size: 14px;
      padding: 10px;
    }
  }
}

通过以上示例代码，我们可以更好地理解 LESS 中的嵌套样式的语法和用法，进一步提高前端开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d3755fa941bf713468f30d

如何在 LESS 中定义嵌套样式