This question already has answers here:
What does '&.' in '&.sub-title' indicates in scss?
                                
                                    (1个答案)
                                
                        
                        
                            What is the difference between CSS and SCSS?
                                
                                    (4个答案)
                                
                        
                                2年前关闭。
            
                    
我在CodePen上看到了这个主题,而CSS上有一个奇怪的行,叫做“&-top”,它对我不起作用。如何正确运行?我需要在文档上安装其他东西吗?

这是代码:

.et-hero-tabs-container {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 10;
    &--top {
        position: fixed;
        top: 0;
    }
}

最佳答案

SCSS中(在代码笔中设置为预处理器),&表示:当前级别的选择器字符串。这是一个快捷方式(约定),因此您无需再次编写整个选择器。

在您的情况下,&表示:.et-hero-tabs-container。这使得

.et-hero-tabs-container {
   &--top {
     /* css here... */
   }
 }


...转换为以下CSS:

.et-hero-tabs-container--top {
  /* css here */
 }


您可以在SCSS嵌套中的任何位置使用它。例如...

.et-hero-tabs-container {
   &--top {
     /* css here... */
     &:hover {
       /* CSS for hover here */
     }
   }
 }


将被解析为:

.et-hero-tabs-container--top {
  /* css here... */
}
.et-hero-tabs-container--top:hover {
  /* CSS for hover here */
}


注意:在上述示例中,/* css here */代替了实际有效的CSS规则。大多数前端工具(即模块捆绑器)会从CSS中删除注释,并且如果逐个字母地使用上述注释,则不会生成任何CSS,因为预处理器会意识到没有实际应用的规则(它们只是注释,导致一些没有规则的空选择器),并将其从输出中完全排除)。

关于css - CSS中的“&”行是什么,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49698439/

10-11 23:09
查看更多