css - Sass – 连接到@at-root 选择器
问题描述
我经常使用@at-root(因为类是动态添加和从正文中删除的),我想知道下面这样的事情是否可行?
header.main {
@at-root body[class*="contact"] #{&}, body.text-single #{&} {
background-color: white;
&.header-is--hidden {
background-color: red; // I know this won't work
}
}
}
而不是必须写:
header.main {
@at-root body[class*="contact"] #{&}, body.text-single #{&} {
background-color: white;
}
@at-root body[class*="contact"].header-is--hidden #{&}, body.text-single.header-is--hidden #{&} {
background-color: red;
}
}
解决方案
我想知道像下面这样的事情是否可行?
是的
您可以将 header.main 选择器保存在变量中并使用插值将其渲染出来——例如:
header.main {
$sel: &; // contains header.main
@at-root body[class*="contact"], body.text-single {
#{$sel} {
background-color: white;
}
&.header-is--hidden #{$sel} {
background-color: red;
}
}
}
CSS 输出
body[class*="contact"] header.main,
body.text-single header.main {
background-color: white;
}
body[class*="contact"].header-is--hidden header.main,
body.text-single.header-is--hidden header.main {
background-color: red;
}
推荐阅读
- javascript - JavaScript 中的 tf.keras.preprocessing.sequence.pad_sequences
- django - 在 Wagtail bakerydemo 上传文件
- html - 如何添加字段标签图像
- python - 我没有从提供的分区算法中得到任何输出
- powershell - 使用 PowerShell 进行网页抓取 问题:我的代码不会提取所需的信息。为什么?
- c - 实现 List ADT 时出错“成员引用基类型 'MOVE'(又名 'struct s_move *')不是结构或联合”
- javascript - 如何为特定公会中的用户添加角色
- python - 多线程将数据加载到 sqlite db
- javascript - Firebase auth onAuthChange 正确使用方法
- python - 在房间图像中插入地板图像(在 OpenCV 中)