基于html类的mixin

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

我想要以下sing 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文件中。

新答案

你想要什么并不容易。LESS并不是完全按照你的意愿来做的。然而，我相信我找到了一种方法来获得对你有用的东西。

定义您的语言规范

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

必须将语言的索引号定义为语言mixin的第一部分(稍后将对此进行解释)。这必须是非零、正数、该语言唯一，并且所有语言必须按从1到whatever的顺序(没有跳过数字)。如果您希望语言按字母顺序输出，则需要反向编号(因此"z"起始语言的编号将从1开始，而"a"起始语言将保留最后一个也是最高的数字)
这些文件将自动附加html.lg代码，其中lg是语言。该代码需要在.htmlAppendmixin部分中定义
你需要用这些语言为你想要的属性(如textColor等)定义getter mixin。如果你想要为你正在定义的类定义多个属性，而你不想将它们定义为一个组(所以你有时想单独访问它们，有时想组访问它们)，那么您需要定义一个单独的组getter(参见下面的colorPkggetter示例)

语言文件代码

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

主文件中的核心变量和Mixin

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

您必须定义一个变量，该变量具有要导入的最大语言数
下面的代码使用了一个循环结构，这篇文章告诉了我。这就是为什么语言必须有顺序索引号的原因。数字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;
}

新答案

原始答案

相关内容

最新更新

热门标签：