新答案
你想要的并不是一件容易的事。 LESS 并非完全按照您的意图进行设计。不过，我相信我找到了一种方法来获得适合您的东西。
定义您的语言细节
请注意，您需要更改定义语言的方式，但可以在单独的文件中定义它们。下面是一个例子。注意：
- 必须将语言的索引号定义为语言 mixin 的第一部分（这将在后面解释）。这必须是非零的、正的、对该语言唯一的，并且所有语言必须按从 1 到任何值的顺序（不能跳过数字）。如果您希望语言按字母顺序输出，那么您需要对它们进行反向编号（因此“z”起始语言将从 1 开始编号，而“a”起始语言将保留最后一个也是最高的数字）。
- 这些文件将自动附加
html.lg 代码，其中lg 是语言。该代码需要在 .htmlAppend mixin 部分中定义。
- 您需要在这些语言中为您想要的属性定义getter mixins（例如
textColor等）。如果您可能想要您正在定义的类的 多个 属性，并且您不想将它们定义为一个组（因此您有时希望单独访问它们，有时作为组访问），那么您需要定义一个单独的组 getter（参见下面的 colorPkg getter 示例）。
语言文件代码
// in cn file
.lang(1, @class, @prop) { //cn
.htmlAppend(@class, @prop);
.htmlAppend(@class, @prop) {
(~"html.cn @{class}") { //lang code here
.getProp(@prop);
}
.getProp(textColor){
color: green;
}
.getProp(bkgColor) {
background-color: #fff;
}
.getProp(colorPkg) {
.getProp(textColor);
.getProp(bkgColor);
}
}
}
// in jp file
.lang(2, @class, @prop) { //jp
.htmlAppend(@class, @prop);
.htmlAppend(@class, @prop) {
(~"html.jp @{class}") { //lang code here
.getProp(@prop);
}
.getProp(textColor){
color: yellow;
}
.getProp(bkgColor) {
background-color: #000;
}
.getProp(colorPkg) {
.getProp(textColor);
.getProp(bkgColor);
}
}
}
主文件中的核心变量和 Mixins
您将导入特定于语言的 LESS 文件，然后在此之后定义一些其他内容，如下所述。注意：
- 您必须使用要导入的最大语言数定义一个变量。
- 以下代码使用a loop structure as found here this post 提示我。这就是为什么语言必须具有顺序索引号的原因。数字零结束循环，这就是索引必须为正的原因。
核心主文件代码
// in main file
//must tell it the maximum number of languages defined,
//and they must be numbered in sequence
@numLang: 2;
//a getter function for all languages
.getLangProp(@class, @prop, @index: @numLang) when (@index > 0) {
//get and define the language specific class
.lang(@index, @class, @prop);
// next iteration
.getLangProp(@class, @prop, @index - 1);
}
// end the loop when index is 0
.getLangProp(@class, @prop, 0) {}
现在定义您的班级信息
对于任何需要语言方面的课程，这将分两个阶段完成。首先，使用语言文件中定义的模式匹配名称从语言文件中调用属性或属性集。然后定义你的另一个基类。请注意，“类”可以是任何类型的选择器字符串（参见第三个示例）。
主文件：定义语言特定的类代码
.getLangProp(".myClass1", textColor);
.myClass1 {
height: 20px;
width: 40px;
}
.getLangProp(".myClass2", bkgColor);
.myClass2 {
position: absolute;
top: 10px;
}
.getLangProp(".parent > .myClass3", colorPkg);
.parent {
& > .myClass3 {
float: right;
}
}
哪个输出这个 CSS
html.jp .myClass1 {
color: yellow;
}
html.cn .myClass1 {
color: green;
}
.myClass1 {
height: 20px;
width: 40px;
}
html.jp .myClass2 {
background-color: #000;
}
html.cn .myClass2 {
background-color: #fff;
}
.myClass2 {
position: absolute;
top: 10px;
}
html.jp .parent > .myClass3 {
color: yellow;
background-color: #000;
}
html.cn .parent > .myClass3 {
color: green;
background-color: #fff;
}
.parent > .myClass3 {
float: right;
}
原答案
最初的答案不符合 OP 想要的结构，但我把它留在这里，以便其他人受益。
LESS 代码
一个解决方案
整理在html标签下
html {
&.cn .div {color: green;}
&.jp .div {color: yellow;}
}
另一种解决方案
组织在.div 类上（不知道你为什么想要一个命名为那个的类，但我同意了）。
.div {
html.cn & {color: green;}
html.jp & {color: yellow;}
}
都输出这个 CSS
html.cn .div {
color: green;
}
html.jp .div {
color: yellow;
}