Sass如何在: not ()伪类中使用“a”来表示没有父类？

Question

我需要添加一个条件“非父类”到代码，但它不工作。

下面是我尝试过的：

.display-download-icon {
  &:not(.media-2 &){ // if it does not has a parent with .media-2 class
    &:hover {
      .image-overlay {
        display: block;
        opacity: 1;
        z-index: 2;
      }
    }
  }
}

但它会转换为下面的CSS：

.display-download-icon:not(.media-2 .display-download-icon):hover .image-overlay {
  display: block;
  opacity: 1;
  z-index: 2;
}

HTML结构为：

<div class="media-2">
  <div class="display-download-icon">
    <div class="image-overlay"></div>
  </div>
</div>

你能帮上忙吗？谢谢

Answer 1

首先，我们必须弄清楚一些事情。您可能误解了this article，因为它的标题有点不恰当。尽管CSS有一个子选择器，但它缺乏选择父选择器的能力。因为SASS只是编写CSS的一种更方便的方式，所以SASS也不能有这样的东西。这就是说，让我们继续讨论你的问题。

如果我理解正确的话，您希望仅当image-overlay元素不包含在具有media-2类的元素中时，它才具有悬停效果。如果是这样的话，你将不得不改变你的方法。

首先，定义正常行为，即除了具有.media-2类的元素之外的所有元素的正常行为。然后为.media-2类的子类定义一个新规则。

萨斯

.display-download-icon {
  display: block; /* Just for the demo */
  height: 100px; /* Just for the demo */
  width: 100%; /* Just for the demo */
  border: 1px solid black; /* Just for the demo */
  margin-bottom: 10px; /* Just for the demo */

  > .image-overlay {
    display: block;
    opacity: 1;
    z-index: 2;
  
    height: 100%; /* Just for the demo */
    width: 100%; /* Just for the demo */

    &:hover {
      background: red; /* Just for the demo */
    }
  }
}

.media-2 .display-download-icon > .image-overlay:hover {
  background: none; /* Just for the demo */
}

代码段

检查此代码段的功能

​

.display-download-icon {
  display: block;
  height: 100px;
  width: 100%;
  border: 1px solid black;
  margin-bottom: 10px;
}

.display-download-icon > .image-overlay {
  display: block;
  opacity: 1;
  z-index: 2;
  
  height: 100%;
  width: 100%;
}

.display-download-icon > .image-overlay:hover {
  background: red;
}

.media-2 .display-download-icon > .image-overlay:hover {
  background: none;
}

<div class="media-1">
  <div class="display-download-icon">
    <div class="image-overlay"></div>
  </div>
</div>

<div class="media-2">
  <div class="display-download-icon">
    <div class="image-overlay"></div>
  </div>
</div>

<div class="media-3">
  <div class="display-download-icon">
    <div class="image-overlay"></div>
  </div>
</div>

​

我希望你能明白这一点。

Answer 2

"&"所做的就是充当前面父选择器的别名，这就是为什么您会得到编译后的输出(因为.media-2类名后面有"&“)。你只需要去掉最后一个"&“，它就能正常编译。

.display-download-icon {
  &:not(.media-2){ // removed the "&"
    &:hover {
      .image-overlay {
        display: block;
        opacity: 1;
        z-index: 2;
      }
    }
  }
}

上面编译为.display-download-icon:not(.media-2):hover .image-overlay { display: block；opacity: 1；z-index: 2；}

但您也可以删除其中的一些嵌套以使其更具可读性

.display-download-icon:not(.media-2):hover {
  .image-overlay {
     display: block;
     opacity: 1;
     z-index: 2;
   }
}

它将编译成相同的输出。

Answer 3

可悲的是，CSS中没有父选择器这样的东西，所以这并不是一个真正的Sass &a问题，而是CSS的核心行为。

您需要编写一个专门的规则，如下所示：

/* base icon styling */
.display-download-icon {
  ...
}

/* separate rule for parent case */
div:not(.media-2) {
  .display-download-icon {
    &:hover {
      .image-overlay {
        display: block;
        opacity: 1;
        z-index: 2;
      }
    }
  }
}