Baddim
@Baddim
Любой Путь верный, что ведёт к Добру и Свету

Как использовать имя css-класса как переменную?

Задача: извлечь данные из имени класса, чтобы использовать их для в качестве переменных.
Практическая задача: задать правильно размеры двух соседних картинок в блоке, исходя из их пропорций. css-классы вида "aspect-X1Y1-X2Y2". Пока для каждой пары картинок (их много и пропорции все разные) приходится каждый раз прописывать свой класс с конкретными пропорциями. Хотелось бы уместить все в единую формулу, которая подхватывала бы данные из имени класса указанного в html.

Текущий вариант css:
[class*='43-34'] {
--aW1: 4;
--aH1: 3;
--aW2: 3;
--aH2: 4;
[class*='43-34']:nth-child(2n+1) {width: calc((var(--aW1) * var(--aH2) / (var(--aW1) * var(--aH2) + var(--aH1) * var(--aW2))) * 100%); aspect-ratio: calc(var(--aW1) / var(--aH1))}
[class*='43-34']:nth-child(2n) {width: calc((var(--aH1) * var(--aW2) / (var(--aW1) * var(--aH2) + var(--aH1) * var(--aW2))) * 100%); aspect-ratio: calc(var(--aW2) / var(--aH2))}


Стандартными методами css это не сделать. Может через less? Но как?
  • Вопрос задан
  • 141 просмотр
Решения вопроса 1
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
Стандартными методами css это не сделать. Может через less? Но как?

CSS не поддерживает динамическое получение имени классов и использование их в качестве именования его переменных. Для LESS можно использовать регулярное выражение, например:
.fn(@aspect-class) {
  @matches: ~`@{aspect-class}.match(/\d+/g)`;
  @a: e(%(`@{matches}[0]`));
  @b: e(%(`@{matches}[1]`));
  // остальная логика
}

.fn(aspect-43-34);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы