用更少的作用域CSS /前置选择(Scoping CSS / Prepend selector wi

我有CSS的一大块，我想“范围”，以HTML的特定块。 我生成一个唯一的ID，然后将其设置HTML的块上，然后想换CSS的块具有相同的ID，使得这些选择器所不能比拟的兄弟姐妹或父元素。 我不知道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;
}

有什么办法少花钱多办事呢？ 第一个选择是容易的，只是包装的CSS块与'.theme0 {' + cssChunk + '}' 。 但我一直没能想出一个办法前面加上'.theme0'所有选择的，而没有空间。

编辑：所以我要澄清，我们的意图是建立这样一个系统到我们的构建过程/依赖系统。 我们试图范围CSS的一大块的反应成分。 我们有我们尝试了几个不同的方法，这只是其中之一。 重点是，CSS和HTML我们正在努力的范围可以是任何东西，我们无法控制或它的知识。 第一图案可以很容易地通过预先计算来实现.uniqueID {和附加} 。 这给.uniqueID .someSelector {} 我不知道是否有可能做类似的事情，但得到.uniqueID.someSelector {} 理想的情况下，而无需编写CSS的原块与我们的作用域系统的知识。

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) {}
}

Answer 2:

在更短的可以嵌套选择该元素中选择，如：

.theme {
    color: black;
    .container {
        color: blue;
    }
}

这西港岛线产生：

.theme {
    color:black;
}
.theme .container {
    color:blue;
}

创建被连接的元件是很容易enof： .test#badge将选择一类test宽度的ID badge

在少这是与不&符号。 （此选择的起始特性）

.test {
    color: blue;
    &#badge {
        color:black;
    }
}

编译为：

.test {
    color: blue;
}
.test#badge {
    color: black;
}

而对于最终的选择：
要得到的输出.test, .container使用功能： .test:extends(.container);

.test {
    color: black;
    &:extends(.conatiner);
}
.container {
    color: pink;
}

编译为：{。测试颜色：黑色; }。测试，.container {颜色：粉红色; }

你甚至可以在扩展一行多者：
.test:extends(.oclas, .tclss);
其WIL工作作为abose只有两个类。 所以outputed选择会.test, .oclass和.test, .tclass

文章来源: Scoping CSS / Prepend selector with LESS