LESS CSS:重用产生@ {name}的类作为一个mixin。(LESS CSS: Reuse

2019-07-20 17:50发布

我使用LESS CSS 1.3.3。 很抱歉,如果这个问题已经被问,我没有在网上找到任何相关信息。

我有一个看起来像这样几类发电机(例如极其简单,就足以触发错误):

#genMarginTop (@name, @size) {
    .@{name} { margin-top: @size; }
}

然后,我用它来产生一些实际的类:

#genMarginTop(mtStandard, 40px);
#genMarginTop(mtHalf, 20px);

到目前为止,一切都很好,LESS正确生成这些类,我可以在HTML中使用它们。 然而,当我想重用这样生成的类作为一个mixin别的地方,我得到一个错误:

.someClass {
    .mtStandard; // won't work, see error below
    // more stuff
}

我得到的错误是:

NameError: .mtStandard is undefined in /.../example.less:161:4
160 .someClass {
161     .mtStandard;
162     // more stuff

当然,我尝试已生成的类使用的混入。 它看起来像 LESS不知何故不会在内部登记等生成的类它产生他们之后,但我可能是错的。

有没有办法重新使用此类生成的类为其他类混入? 作为以较少的很新的,它们的文档是相当少约生成的类,我在一个总损失(特别是因为这是似乎是混入被接受的唯一语法)。

感谢您阅读我。


注:我为什么用这样的类生成的原因是因为他们是远远超过上述(觉得嵌套类,都依赖于一组通用的参数)的例子比较复杂,我嵌入各种生成的类@media查询支持在“禅”时尚任何装置类型。 最后我得到的东西,如:

@media (max-width: 1024px) {
    #genSomething(something, somethingParam1, ...);
    #genSomething(somethingElse, somethingElseParam1, ...);
    #genStuff(stuff, stuffParam1, ...);
}
@media (max-width: 240px) {
    #genSomething(something, somethingParam2, ...);
    #genSomething(somethingElse, somethingElseParam2, ...);
    #genStuff(stuff, stuffParam2, ...);
}
// etc

解决方案/测试用例

这是一个测试案例@MartinTurjak的解决方案,我可以证实,这个工程预期,嵌套类和一切:

.explicit {
  margin-top: 1;
  input { margin-top: 1; }
}
.reuseExplicit {
  .explicit;
  margin-bottom: 1;
}
#generator (@arg) {
  margin-top: @arg;
  input {
    margin-top: @arg;
  }
}
.generated { #generator(1); }
.reuseGenerated {
  .generated;
  margin-bottom: 1;
}

其中正确生成:(注意如何明确/产量产生非常相同的结果)

.explicit {
  margin-top: 1;
}
.explicit input {
  margin-top: 1;
}
.reuseExplicit {
  margin-top: 1;
  margin-bottom: 1;
}
.reuseExplicit input {
  margin-top: 1;
}
.generated {
  margin-top: 1;
}
.generated input {
  margin-top: 1;
}
.reuseGenerated {
  margin-top: 1;
  margin-bottom: 1;
}
.reuseGenerated input {
  margin-top: 1;
}

Answer 1:

不幸。 选择内插只是串内插,然后将字符串被打印成的CSS,所以在较少的运行中不产生类对象。

所以,你可以设计一个发电机/混入,包括您的操作:

#genMarginTop (@size) {
  margin-top: @size;
}

但随后通过调用混入/发电机建设类:

.mtStandard {#genMarginTop(40px);}
.mtHalf {#genMarginTop(20px);}

而这样一来,他们是可以使用的混合类对象=)

.someClass {
  background-color: #FFF;
  .mtStandard;
  //more of this stuff
}

这看起来在这个简单的例子有点傻,但也许是这样的:

 #bggenerator (@color) {
    background-color: @color;
 }
 #bggenerator (@color, dark) {
    @blend : @color + #842210;
    background-color: darken(@blend, 30%);
 }
 #bggenerator (@color, @url, @rest) {
    background: "@{color} url('@{url}') @{rest}";
 }

 .mtStandard {
    #genMarginTop(40px);
 }

.someClass {
  .mtStandard;
  #bggenerator(#FFF, "bgimage.png", left top no-repeat);
  //more of this stuff
}

或东西做更令人兴奋的东西的论据



Answer 2:

UPDATE LESS 1.7+(工程根据需要)

.@{name}作为原题曾渴望语法现在只是工作。

LESS 1.4+解决方法实际使用动态类名称

我想出了一个变通为此而对另一个问题的工作,所以我张贴它作为第二个答案,因为它会在比我更早的答案完全不同的方向。

这种解决方案需要几个步骤(这样是不是在更小的最终解决将是为方便),但给予能够使用动态生成的类名的实际功能

首先:定义动态类

这就像你的计划。

#genMarginTop (@name, @size) {
    .@{name} { margin-top: @size; }
}

#genMarginTop(mtStandard, 40px);
#genMarginTop(mtHalf, 20px);

二:编译文件到CSS

因此,可以说您编译dynamicClasses.lessdynamicClasses.css 。 这将导致动态类名称为“解决”实际类。

第三:导入CSS一样都不能少到使用动态类名称的第二 LESS文件

使用类型转换为@import ,我们这样做:

@import (less) dynamicClasses.css;

这需要在这些决定的类名dynamicClasses.css文件,并导入它们为少 ,这使得所有的类名现已作为混入。 所以,当你想要的,你可以这样做:

.someClass {
    .mtStandard; // will work
    // more stuff
}


Answer 3:

我同意。 它看起来像LESS不适合混入目的注册这些类。

不完整的解决方案

这更少的代码:

#genMarginTop (@name, @size) {
  @genMarginTopNameCheck: @name; 
  .get(@name) when (@name = @genMarginTopNameCheck) { margin-top: @size; }
  .@{name} { .get(@name); }
}
#genMarginBot (@name, @size) {
    @genMarginBotNameCheck: @name; 
    .get(@name) when (@name = @genMarginBotNameCheck)  { margin-bottom: @size; }
    .@{name} { .get(@name); }
}


#genMarginTop(mtStandard, 40px);
#genMarginBot(mbStandard, 20px);
#genMarginTop(mtSpecial, 80px);

.myClass {
  .get(mtStandard);
  .get(mbStandard); 
}

.myClass2 {
  .get(mtSpecial);
  .get(mbStandard); 
}

产生这个CSS

.mtStandard {
  margin-top: 40px;
}
.mbStandard {
  margin-bottom: 20px;
}
.mtSpecial {
  margin-top: 80px;
}
.myClass {
  /* NOTE the mtStandard definition is missing here !!! */
  margin-bottom: 20px;
}
.myClass2 {
  margin-top: 80px;
  margin-bottom: 20px;
}

最终问题的说明及Disscussion化解

每个混入正在定义一个守卫.get()以关闭混入@name拿到的风格,那就是交叉检查,以一种独特的NameCheck为mixin的变量名。 你所有的实际代码中定义的.get()并混入用于实际产生的.@{name}类代码。

这产生了实际的类名,每次工作正常。 但是,目前的getter函数只工作了最后一个使用混入定义的类名。 所以你可以在上面看到,我的GET呼吁 mtStandard不工作,因为设置 mtSpecial显然已经覆盖了#genMarginTop .get()与混入mtSpecial定义。

现在,我想你会想打电话给#getMarginTop和您的其他类似的混入不止一次,所以显然这仍然是一个不完整的解决方案 。 我已经想通了如何可以得到由顶层混入生成的类用作使用另一个类“混入” .get()但我还没有想出如何使.get()当顶级混入又被称为没有得到覆盖。



文章来源: LESS CSS: Reuse generated .@{name} class as a mixin
标签: css less mixins