嵌套在 &:hover 中的父选择器

Question

我正在使用 Less parent 选择器来缩短我的选择器：

.module-name {
 // styles go here
 &__sub-module-1 {
  //styles go here
 }
}

现在我的问题是如何继续使用父选择器在嵌套的 :hover 语句中添加模块名称。例如。在 sub-module-1 悬停时，我想更改 sub-module-2 中的某些内容。在 &:hover 语句中，父选择器指的是什么？

.module-name {
  &__sub-module1 {
   &:hover {
    &__sub-module2 {
     // on hover of .module-name__sub-module1 change something in .module-name__sub-module2
    }
   }
  }
}

如果我这样写它可以工作，但是它违背了使用父选择器自动填写模块名称的目的：

.module-name {
  &__sub-module1 {
   &:hover {
    .module-name__sub-module2 {
     // on hover of .module-name__sub-module1 change something in .module-name__sub-module2
    }
   }
  }
}

我希望我能充分表达我的问题；感谢您的帮助。

Answer 1

父级选择器 (&) 将始终根据您所在的级别引用完整的父级。例如，在第一层嵌套中，& 指的是 .module-name。第二层指的是.module-name__sub-module1，第三层指的是.module-name__sub-module1:hover.

Extract from Less Website: Note that & represents all parent selectors (not just the nearest ancestor or the overall root ancestor)

以上声明中强调的部分是我根据上下文包含的

对于这种特殊情况，您可以将 module-name 分配给一个变量并使用如下所示的选择器插值来形成选择器。

与父选择器 (&) 不同，变量值永远不会改变，无论您有多少层嵌套以及您在哪个嵌套层级使用它。

@module-name: mod-name;
.@{module-name} {
    &__sub-module1 {
        &:hover {
            & .@{module-name}__sub-module2 {
                // on hover of .module-name__sub-module1 change something in .module-name__sub-module2
                color: blue;
            }
        }
    }
}

嵌套在 &:hover 中的父选择器

Parent Selector nested inside &:hover

css

less