LESS父选择器

在 LESS 中，父选择器是指通过符号 & 引用当前选择器的直接父元素。父选择器在编写嵌套样式时特别有用，可以避免使用重复的选择器名称。

以下是一个使用父选择器的示例：

.nav {
  &-item {
    color: #333;
    &:hover {
      color: #fff;
    }
  }
}

在编译后，以上代码将会转换为：

.nav-item {
  color: #333;
}
.nav-item:hover {
  color: #fff;
}

从以上示例中可以看出，父选择器可以帮助我们简化选择器名称，使得代码更加简洁易懂。

另外，父选择器还可以与 @media 查询结合使用，实现响应式设计。以下是一个示例：

.nav {
  &-item {
    color: #333;
    @media screen and (min-width: 768px) {
      font-size: 16px;
    }
    @media screen and (min-width: 1024px) {
      font-size: 18px;
    }
  }
}

以上代码使用了父选择器和 @media 查询，实现在不同屏幕尺寸下，菜单项的字体大小也不同。

总结一下，LESS 父选择器在编写嵌套样式时非常有用，可以避免使用重复的选择器名称，使得代码更加简洁易懂。同时，父选择器还可以与 @media 查询结合使用，实现响应式设计。