&::before 在 scss 中是什么意思 [重复]答案

【问题标题】：what does &::before mean in scss [duplicate]&::before 在 scss 中是什么意思 [重复]
【发布时间】：2018-08-18 12:03:12
【问题描述】：

我在我的 scss 文件中发现了一些样式，如下所示：

:host {
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: $channel-border-w;
        background: $color-border-divider-bg;
    }
}

这是否意味着在我的主机之前设置元素的样式？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/::before
在这种情况下，与号用于指示您正在使用嵌套的伪元素。例如，您不能只在 SCSS 中单独嵌套一个 :hover 伪类，您必须先添加与符号：&:hover。双冒号表示伪元素选择器，这意味着之前的元素实际上并不在 DOM 中，尽管您仍然可以将其用作选择器。伪类使用一个冒号（即:hover），而伪元素使用两个。
@Mark 你能接受你的评论并将其作为答案发布吗？我认为您已经很好地解释了该元素实际上是如何不在 DOM 中的，而其他答案只是重申了它在在线文档中所说的内容
@R Doolabh 您的问题被标记为重复，所以很遗憾我无法将其发布为答案。但很高兴听到它有帮助！

标签： css sass

【解决方案1】：

& 将所选内容添加到父选择器。 ::before 创建一个伪元素作为父选择器的子元素。

我在这里给你完整的文档：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

https://css-tricks.com/the-sass-ampersand/

【讨论】：

【解决方案2】：

来自MDN docs，

在 CSS 中，::before 创建一个伪元素，它是所选元素的第一个子元素。它通常用于向具有 content 属性的元素添加装饰性内容。默认是内联的。

它前面的& 表示它正在将这个伪选择器添加到它所嵌套的选择器中，也就是你的宿主元素。

你发布的sn-p可以翻译成：

:host::before {
   ... your styles here ...
}

【讨论】：