Question

我有20-30个元素应该共享相同的color和font-family。因此我把它设置为mixin。现在，标识为cn的{{1}}网站的字体应为<html class='cn'>，而mango-arial应为jp。

我想要下面的CSS结果文件：

hentai-arial

我正在尝试以下较少的代码，每个规则都在一个单独的语言文件中定义：

html.cn .div
{   
    color:green;
}

html.jp .div 
{
    color:yellow:
}

请注意，我希望将所有语言覆盖在单独的较少文件中。

Answer 1

新答案

你想要的并不是一件容易的事。 LESS的设计并不像你想要的那样。但是，我相信我找到了一种方法来获得适合你的东西。

定义您的语言细节

请注意，您需要更改定义语言的方式，但可以在单独的文件中定义它们。以下是一个例子。注意：

必须将语言的索引号定义为语言mixin的第一部分（稍后将对此进行说明）。这必须是NON-ZERO，POSITIVE，对于该语言是唯一的，并且所有语言必须按顺序（没有跳过数字）从1到whateveer。如果你希望语言按字母顺序输出，那么你需要反向编号（所以'z'起始语言将开始编号为1，而'a'起始语言将保持最后和最高数字。） / LI>
这些文件会自动附加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);
      }
   }
}

主文件中的核心变量和混合

您可以导入特定于语言的LESS文件，然后按照下面的说明定义其他一些内容。注意：

您必须使用要导入的最大语言数定义变量。
以下代码使用a loop structure as found here this post让我了解的问题。这就是语言必须具有顺序索引号的原因。数字ZERO结束循环，这就是索引必须为正的原因。

核心主文件代码

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

现在定义课程信息

对于需要语言方面的任何类，这分两个阶段完成。首先，使用语言文件中定义的模式匹配名称从语言文件中调用属性或属性集。然后定义您的其他基类。请注意，“class”可以是任何类型的选择器字符串（请参阅第三个示例）。

主文件：定义特定于语言的类代码

.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;
}

mixin基于html类

1 个答案:

新答案

原始答案