在 Less 中，你可以使用嵌套规则来更方便地组织样式。嵌套规则让你可以在一个选择器内部包含另一个选择器，从而形成层次结构，提高样式表的可读性。以下是 Less 中嵌套规则的基本用法：

基本嵌套
.nav {
  background-color: #333;

  a {
    color: #fff;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

在这个例子中，.nav 类的样式规则包含了嵌套的 .nav a 规则。当 .nav 类的元素包含了 <a> 元素时，<a> 元素会继承.nav a 中定义的样式。

父选择器引用

Less 还允许使用 & 符号引用父选择器，这在定义伪类样式时非常有用：
.btn {
  padding: 10px;

  &:hover {
    background-color: #3498db;
  }
}

在这个例子中，当鼠标悬停在拥有 .btn 类的元素上时，将应用 :hover 伪类样式。

嵌套属性

在 Less 中，你还可以嵌套属性，这样可以更清晰地表示相关属性的关系：
.box {
  font: {
    weight: bold;
    size: 14px;
    family: 'Arial', sans-serif;
  }

  margin: {
    top: 10px;
    right: 5px;
  }
}

在这个例子中，.box 类的样式规则中嵌套了 font 和 margin 属性。

请注意，嵌套虽然提高了可读性，但也要注意不要过度嵌套，以免造成样式层次过深，使代码难以维护。合理使用嵌套规则能够有效提高样式表的结构化程度。


转载请注明出处：http://www.zyzy.cn/article/detail/4280/Less