我有一大堆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) {}
}

07-24 09:44
查看更多