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”,它对我不起作用。如何正确运行?我需要在文档上安装其他东西吗?
这是代码:
...转换为以下CSS:
您可以在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/