Home/ Questions/Q 8874455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T18:43:34+00:00

I have 20-30 elements that should share the same color and font-family . Therefore

  • 0

I have 20-30 elements that should share the same color and font-family. Therefore I set it as a mixin. Now the cn website identified as <html class='cn'> should have the font of mango-arial and the jp should be hentai-arial.

I want the following sing CSS result file:

html.cn .div
{   
    color:green;
}

html.jp .div 
{
    color:yellow:
}

I’m, trying the following less code, each rule is defined in a separate language file:

-- in cn.less
html.cn
{
    .textColor { color:green}
}

-- in jp.less
html.jp
{
    .textColor { color: yellow} 
}

-- in general.less
.div {.textColor;}
.someOtherElement1 { .textColor; otherstyles:here;}
.someOtherElement2 { .textColor; otherElem2Styles:here;}
...

Pay attention, I want all the language overrides in their separate less files.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    1. 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).
    2. 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.
    3. 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:

    1. You must define a variable with the maximum number of languages you are importing.
    2. 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;
}
    • 0