Question

我有一大块我想要的CSS＆＃34;范围＆＃34;到特定的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作为反应组件的范围。我们尝试了几种不同的方法，这只是其中之一。重点是，我们尝试范围的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

in less 你可以嵌套选择器，以便在该元素内选择，如：

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

这将产生：

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

创建已连接的元素非常简单： .test#badge会选择一个test个广告位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;
}

编译为： .test { 颜色：黑色; } .test，.container { 颜色：粉色; }

您甚至可以在一行中扩展多个：
.test:extends(.oclas, .tclss);
并且它的工作只对两个班级都有效。因此，输出的选择器将是.test, .oclass和.test, .tclass

使用LESS确定CSS / Prepend选择器的范围

2 个答案: