New Answer
What you desire is not exactly an easy task. LESS is not quite designed to do it they way you intend. However, I do believe I found a way to get something that would work for you.
Define Your Language Specifics
Note that you will need to change how you have the languages defined, but they can be defined in separate files. Below is an example. Note:
- An index number for the language must be defined as the first part of the language mixin (this will be explained later). This must be NON-ZERO, POSITIVE, unique to that language, and all the languages must be in sequence (no skipping numbers) from 1 to whateveer. If you want the languages to output in alphabetical order, then you need to number them in reverse (so 'z' starting languages would be starting the numbering at 1, while 'a' starting languages would hold the last and highest number).
- These files will automatically append the
html.lg code where lg is the language. That code needs to be defined in the .htmlAppend mixin portion.
- You need to define getter mixins in these langauges for the properties you want (such as
textColor, etc.). If you may want multiple properties for a class you are defining and you do not want to define them as a group (so you want to sometimes access them individually, sometimes as group), then you need to define a separate group getter (see the colorPkg getter below for an example).
Language Files Code
// 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);
}
}
}
Core Variable and Mixins in Your Main File
You would import your language specific LESS files, then following that, have a few other things defined as noted below. Note:
- You must define a variable with the maximum number of languages you are importing.
- The following code uses a loop structure as found here which this post clued me in on. This is why the languages must have the sequential index number. The number ZERO ends the loop, which is why the indexes must be positive.
Core Main File Code
// 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) {}
Now Define Your Class Info
This is done in two stages for any classes that need the language aspects. First, call the property or property set from the language files, using the pattern matching name defined in the language files. Then define your other base class. Note that the "class" can be a selector string of any kind (see the third example).
Main File: Define Language Specific Class Code
.getLangProp(".myClass1", textColor);
.myClass1 {
height: 20px;
width: 40px;
}
.getLangProp(".myClass2", bkgColor);
.myClass2 {
position: absolute;
top: 10px;
}
.getLangProp(".parent > .myClass3", colorPkg);
.parent {
& > .myClass3 {
float: right;
}
}
Which Outputs This 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;
}
Original Answer
The original answer did not accommodate the structure of what the OP wanted, but I have left it here so that others might benefit.
LESS Code
One Solution
Organized under html tag
html {
&.cn .div {color: green;}
&.jp .div {color: yellow;}
}
Another Solution
Organized on the .div class (not sure why you would want a class named that, but I went with it).
.div {
html.cn & {color: green;}
html.jp & {color: yellow;}
}
Both Output This CSS
html.cn .div {
color: green;
}
html.jp .div {
color: yellow;
}
