css - 使用 LESS 限定 CSS/前置选择器

Question

我有一大块 CSS，我想将其“作用域”到特定的 HTML block 。我正在生成一个唯一的 ID，然后将其设置在 HTML block 上，然后想用相同的 ID 包装 CSS block ，以便这些选择器无法匹配兄弟或父元素。我不知道 CSS block 的内容。给定一大块 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 block 。但是我一直没能想出一种方法来在没有空格的情况下将 '.theme0' 添加到所有选择器。

编辑:所以我应该澄清一下，我们的意图是将这样一个系统构建到我们的构建过程/依赖系统中。我们正试图将一大块 css 限定为一个 React 组件。我们正在尝试几种不同的方法，这只是其中之一。关键是，我们试图确定范围的 CSS 和 HTML 可以是任何东西，我们无法控制或不知道它。通过在 .uniqueID { 前面加上 } 可以很容易地实现第一个模式。这给出了 .uniqueID .someSelector {}。我想知道是否可以做类似的事情但得到 .uniqueID.someSelector {}？理想情况下，不必在了解我们的范围系统的情况下编写原始的 CSS block 。

Answer 1

假设组件样式在单独的 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) {}
}