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

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

"&" 所做的所有事情都是作为前面的父选择器的别名，这就是为什么你会得到编译输出的原因（因为 .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 { 显示：块； 不透明度：1； z指数：2； }

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

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

这将编译为相同的输出。

Answer 2

遗憾的是，CSS 中没有父选择器之类的东西，所以这并不是真正的 Sass & 符号问题，而是 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;
      }
    }
  }
}

Answer 3

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

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

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

SASS

.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 */
}

片段

检查这个 sn-p 的功能

.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>

希望你能明白。