How to convert string's cases in LessCSS?

Question

Is there a way to convert a given class name's case ?

The pseudo code would be :

&.@{lowercase(name)} {

...

}

Answer 1

There is a way

But it is questionable how useful it would be, and also not very straightforward to achieve. However, for the sake of showing it can be done using the inline javascript feature of LESS, there is this example:

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 Output

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

You can see that it requires some extra layering of mixins to set properties to this new class. As well, any already existing class must be passed in as a keyword value as the third example does, which means some "repetition" (you cannot just "read" the class name from LESS and have it spit out a lower case version).

Answer 2

No, there is no way to do this.

CSS, CSS3 and LESS do not implement it.

There are several reasons why this would be a bad idea. The main reason being that it could get confusing very quickly, and that it encourages bad naming conventions.