在SASS中，如何引用父母？

Question

如果层次结构如下：

.all
  .d1
    .d2

我想通过“.d2”选择“.all”。怎么会这样？例如：

.all
  .d1
    .d2
      &:hover
        & .all
          ...

“＆amp; .all”行编译.all ... ???

Answer 1

您期望输出什么？在您给出的示例中，您将获得如下选择器：

.all .d1 .d2.all:hover

...如果我知道SASS（我使用LESS）。

这是你想要的，或者你到底想要什么？

Answer 2

如果您只想对<div class="all">做某事，那么您可以这样做，例如：

.all
  color: red

如果你想改变<div class="all">内的所有内容，那么你可以这样做：

.all *
  color: red

最后，如果您只想更改<div class="all">的直接子项，则可以执行此操作：

.all > *
  color: red

Answer 3

您只需在.all：

下定义所需的样式

.all
  background: #000 center center no-repeat
  margin: 0 auto
  .dl
    background: #fff center center no-repeat
    margin: 15px
    &:hover
      margin: 0
      text-decoration: none

这将输出为

.all {
  background: #000 center center no-repeat;
  margin: 0 auto;
}
.all .d1 {
  background: #fff center center no-repeat;
  margin: 15px;
}
.all .d1:hover {
  margin: 0;
  text-decoration: none;
}

修改

我一开始并不理解你的问题。答案是通过CSS无法做到这一点。您将要使用jQuery来实现这样的目标：

像这样： http://jsfiddle.net/9ntg7/1/

<强> SASS

   .all
      position: relative
      display: block
      height: 100px
      width: 100px
      z-index: 1
      .dl
        position: absolute
        top: 50%
        left: 50%
        display: block
        height: 50px
        width: 50px
        margin: -25px 0 0 -25px
        z-index: 2
        background: white

    .all1
      background: green

    .all2
      background: red

<强>的Javascript

$(".dl").hover(function () {
    $(".all").removeClass(".all1")
    $(".all").addClass("all2");
});