Question

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

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

现在我的问题是如何继续使用父选择器在嵌套的：hover语句中添加module-name。例如。在子模块-1的悬停时我想改变子模块-2中的某些东西。在＆amp;：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。

从Less Website提取：请注意&代表所有父选择器（不仅是最近的祖先或整个根祖先）

上述陈述中强调的部分是基于上下文的

对于这种特殊情况，您可以将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;
            }
        }
    }
}

父选择器嵌套在＆amp;：悬停内

1 个答案: