如何在 Less CSS 中转换字符串大小写？答案

【问题标题】：How to convert string's cases in LessCSS?如何在 Less CSS 中转换字符串大小写？
【发布时间】：2014-04-15 00:00:31
【问题描述】：

有没有办法转换给定类名的大小写？

伪代码是：

&.@{lowercase(name)} {

...

}

【问题讨论】：

标签： less case lowercase

【解决方案1】：

有办法

但它有多大用处是值得怀疑的，而且实现起来也不是很简单。但是，为了展示它可以使用 LESS 的内联 javascript 功能来完成，有这个例子：

少

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

您可以看到，它需要一些额外的 mixins 分层才能为这个新类设置属性。同样，任何已经存在的类都必须像第三个示例一样作为关键字值传入，这意味着一些“重复”（您不能只是从 LESS 中“读取”类名并让它输出小写版本）。

【讨论】：

【解决方案2】：

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

CSS、CSS3 和 LESS 没有实现它。

这不是一个好主意有几个原因。主要原因是它可能会很快变得混乱，并且会鼓励不良的命名约定。

【讨论】：

谢谢！我面临的问题是我无法控制 dom，有时我会得到大写或大写的类名。我会尝试另一种方式。
我刚刚意识到你可以告诉 less 解释器忽略大小写敏感；（见stackoverflow.com/questions/16828/…）