我有一大堆CSS,我想“范围”到特定的HTML块。我正在生成一个唯一的ID,然后将其设置在HTML块上,然后想用相同的ID包装CSS块,以使这些选择器无法匹配同级或父元素。我不知道CSS块的内容。给定一大堆CSS:
.container {
background-color: black;
}
.container .title {
color: white;
}
.container .description {
color: grey;
}
我需要像这样出来:
.theme0 .container, .theme0.container {
background-color: black;
}
.theme0 .container .title, .theme0.container .title {
color: white;
}
.theme0 .container .description, .theme0.container .description {
color: grey;
}
LESS有什么办法做到这一点?第一个选择器很简单,只需用
'.theme0 {' + cssChunk + '}'
包装CSS块。但是我还没有办法在所有选择器前加'.theme0'
而不加空格。编辑:
因此,我应该澄清一下,我们的意图是将这样的系统构建到构建过程/依赖系统中。我们正在尝试将一堆css定义为一个react组件。我们正在尝试几种不同的方法,这只是其中之一。关键是,我们试图确定范围的CSS和HTML可以是任何东西,我们对此没有控制权或知识。通过在
.uniqueID {
之前添加}
可以轻松实现第一个模式。这给出了.uniqueID .someSelector {}
。我想知道是否有可能做类似的事情但得到.uniqueID.someSelector {}
?理想情况下,无需借助我们的范围系统知识就可以编写CSS的原始块。 最佳答案
假设组件样式在单独的CSS文件中,即:
// component.css
.container {
background-color: black;
}
.container .title {
color: white;
}
.container .description {
color: grey;
}
包装代码可以是:
.theme0 {
@import (less) "component.css";
&.container:extend(.theme0 .container all) {}
}