Как конвертировать строковые регистры в LessCSS?

Есть ли способ преобразовать регистр заданного имени класса?

Псевдокод будет:

&.@{lowercase(name)} {

...

}
Источник

2 ответа

Решение

Есть выход

Но сомнительно, насколько это было бы полезно, а также не очень просто достичь. Однако, чтобы показать, что это можно сделать с помощью встроенной функции 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;
}

Вы можете видеть, что для установки свойств этого нового класса требуется некоторая дополнительная структура миксинов. Кроме того, любой уже существующий класс должен быть передан в качестве значения ключевого слова, как в третьем примере, что означает некоторое "повторение" (вы не можете просто "прочитать" имя класса из LESS и заставить его выплевывать строчную версию).

Источник

Нет, нет способа сделать это.

CSS, CSS3 и LESS не реализуют это.

Есть несколько причин, почему это было бы плохой идеей. Основная причина в том, что это может очень быстро запутать, и что оно поощряет плохие соглашения об именах.

Источник
Другие вопросы по тегам