Question

有没有办法转换给定的类名称？

伪代码是：

&.@{lowercase(name)} {

...

}

Answer 1

有一种方法

但它有多么有用，而且实现起来也不是很直接。但是，为了显示它可以使用LESS的内联javascript功能来完成，有这个例子：

<强> LESS

@className1: SomeCamelCased;
@className2: ALL-UPPER-CASE;

.Some-Class-Already-Defined {
  prop: no straight forward way here;
}

.lowerCaseIt(@className) {
  @newClass: e(`'@{className}'.toLowerCase()`);
  &.@{newClass} {
    prop: a passed class name will work;
    .setProps();
  }
}

& {
  .lowerCaseIt(@className1); 
  .setProps() {
    property: that you set
  }
}
& {
  .lowerCaseIt(@className2); 
  .setProps() {
    property: that you set; 
    another: that you set;
  }
}
& {
  .lowerCaseIt(Some-Class-Already-Defined); 
  .setProps() {
    p1: that you set; 
    p2: that you set;
  }
}

CSS输出

.Some-Class-Already-Defined {
  prop: no straight forward way here;
}
.somecamelcased {
  prop: a passed class name will work;
  property: that you set;
}
.all-upper-case {
  prop: a passed class name will work;
  property: that you set;
  another: that you set;
}
.some-class-already-defined {
  prop: a passed class name will work;
  p1: that you set;
  p2: that you set;
}

你可以看到它需要一些额外的mixin分层来为这个新类设置属性。同样，任何已经存在的类必须像第三个例子那样作为关键字值传入，这意味着一些重复＆＃34; （你不能只是＆＃34;阅读＆＃34;来自LESS的类名并让它吐出小写版本。）

Answer 2

不，没有办法做到这一点。

CSS，CSS3和LESS没有实现它。

这有几个原因可能是个坏主意。主要原因是它很快就会混淆，并且它会鼓励错误的命名约定。

如何在Less CSS中转换字符串案例？

2 个答案:

有一种方法