1

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

我想要以下唱 CSS 结果文件：

html.cn .div
{   
    color:green;
}

html.jp .div 
{
    color:yellow:
}

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

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

请注意，我希望所有语言覆盖在它们单独的 less 文件中。

4

1 回答 1

3

新答案

你想要的并不是一件容易的事。LESS 并非完全按照您的意图进行设计。但是，我确实相信我找到了一种方法来获得对您有用的东西。

定义你的语言细节

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

  1. 语言的索引号必须定义为语言混入的第一部分（这将在后面解释）。这必须是非零的、正的、该语言唯一的，并且所有语言必须按从 1 到任何值的顺序（不能跳过数字）。如果您希望语言按字母顺序输出，那么您需要对它们进行反向编号（因此“z”起始语言将从 1 开始编号，而“a”起始语言将保留最后一个也是最高的数字）。
  2. 这些文件将自动在语言所在的位置附加html.lg代码。lg该代码需要在.htmlAppendmixin 部分中定义。
  3. 您需要在这些语言中为您想要的属性（例如textColor等）定义 getter mixins。如果您可能想要一个正在定义的类的多个属性并且您不想将它们定义为一个组（因此您有时希望单独访问它们，有时作为组访问它们），那么您需要定义一个单独的组 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 文件，然后在此之后定义一些其他内容，如下所述。笔记：

  1. 您必须使用要导入的最大语言数定义一个变量。
  2. 下面的代码使用了一个循环结构，这个结构让我知道了这篇文章。这就是为什么语言必须具有顺序索引号的原因。数字零结束循环，这就是索引必须为正的原因。

核心主文件代码

// 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 想要的结构，但我把它留在这里，以便其他人受益。

更少的代码

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;
}
于 2012-11-23T20:40:33.297 回答