以下是关于 LESS 嵌套（Nesting） 的详细介绍，包括语法规则、核心用法、注意事项及实际示例：

一、简介

LESS 的嵌套允许开发者以 层级化结构 编写 CSS 规则，模仿 HTML 的 DOM 结构，使代码更直观且易于维护。嵌套通过减少重复书写父选择器，显著提升代码可读性。

二、基本语法

1、普通嵌套

将子选择器直接写在父选择器的代码块内：

// LESS 嵌套写法
nav {
  background: #333;
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        color: white;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

编译后的 CSS：

nav {
  background: #333;
}
nav ul {
  margin: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: white;
}
nav ul li a:hover {
  text-decoration: underline;
}

2. 父选择器引用符 &

表示当前嵌套层级的父选择器。

典型场景：伪类、伪元素、合并选择器名。

示例 1：

// 伪类示例
.button {
  color: blue;
  &:hover {
    color: darkblue;
  }
  &.active {
    background: #eee;
  }
}

编译结果：

.button {
  color: blue;
}
.button:hover {
  color: darkblue;
}
.button.active {
  background: #eee;
}

示例 2：

// 合并选择器
.prefix {
  &-item {
    padding: 10px;
  }
}

编译结果：

.prefix-item {
  padding: 10px;
}

三、结合使用

1、嵌套媒体查询（Media Queries）

将媒体查询条件直接嵌套在对应的选择器中，提升代码组织性：

.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 750px;
  }

  @media (min-width: 1200px) {
    width: 1170px;
  }
}

编译结果：

.container {
  width: 100%;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

2、嵌套属性（Property Nesting）

对具有相同前缀的 CSS 属性（如 font-*、background-*）进行嵌套：

.text {
  font: {
    family: "Arial";
    size: 16px;
    weight: bold;
  }
  background: {
    color: #fff;
    image: url("bg.png");
  }
}

编译结果：

.text {
  font-family: "Arial";
  font-size: 16px;
  font-weight: bold;
  background-color: #fff;
  background-image: url("bg.png");
}

3、结合混入（Mixins）

在嵌套结构中调用 Mixins：

.shadow(@size) {
  box-shadow: 0 0 @size rgba(0, 0, 0, 0.1);
}

.card {
  padding: 20px;
  .shadow(10px);
  .title {
    font-size: 18px;
    .shadow(5px); // 子元素调用 Mixin
  }
}

四、注意事项

1、避免过度嵌套

嵌套层级过深会导致生成的 CSS 选择器冗长，影响性能和可维护性。建议不超过 3 层。

反例（过度嵌套）：

body {
  .page {
    .container {
      .row {
        .col {
          ...;
        } // 4 层嵌套
      }
    }
  }
}

2、谨慎使用 & 符

错误使用 & 可能生成意外的选择器：

.menu {
  &-item { // 正确：生成 .menu-item }
  .sub & { // 正确：生成 .sub .menu }
  & &-title { // 错误：生成 .menu .menu-title }
}

3、与 CSS 原生嵌套对比

LESS 的嵌套是预处理器特性，而 CSS 原生嵌套（现代浏览器支持）语法略有不同：

/* 原生 CSS 嵌套 */
nav {
  ul {
    li {
      ...;
    }
  }
}

五、最佳实践

1、模块化代码

结合 @import 拆分嵌套代码到独立文件（如 header.less、footer.less）。

2、命名规范

使用语义化的类名（如 .header-nav 而非 .nav1）。

3、注释与缩进

通过注释和缩进保持嵌套结构清晰：

// 导航栏样式
.navbar {
  background: #333;

  // 导航链接
  .nav-link {
    color: white;
    &:hover {
      color: #eee;
    }
  }
}

六、总结

LESS 嵌套通过层级化代码结构，显著提升了 CSS 的可读性和开发效率。合理使用 & 符、属性嵌套和媒体查询嵌套，可以让代码更简洁直观。但需注意避免过度嵌套，保持选择器简洁，以兼顾性能和可维护性。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24