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

Question

[Вадим]

Задача: извлечь данные из имени класса, чтобы использовать их для в качестве переменных.
Практическая задача: задать правильно размеры двух соседних картинок в блоке, исходя из их пропорций. 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? Но как?

Comments

[Ankhena]

Может просто ставить пропорции инлайн кастомками?
Пока не понятно зачем нужны заморочки на классы.

Лучше расскажите исходную задачу, а не тот тупик, в который вы пришли.

[Вадим]

Ankhena, в топике привел конкретный пример. Загвоздка в том, что фото много, пропорций много, их комбинаций много, повторений разных комбинаций тоже много. И html-файлов, где они встречаются, много. Прописывать для каждой пары картинок ручками не вариант. Пока вышел из положения прописать отдельными классами. Но выходит большая портянка, которая разрастается с каждой новой комбинацией пропорций. Хотя везде в них работает одна формула (указана в примере), и если бы подставить в нее 4 переменные из имени класса, это бы решило задачу всего одной единственной формулой. В итоге прописываем в html любую комбинацию в классе aspect-X1Y1-X2Y2, откуда данные подставляются в единую формулу.
Как еще упростить решение задачи, пока не вижу

[Сергей delphinpro]

Вадим, разметку-то покажите

[Ankhena]

Вадим, это вообще не исходная задача.

Но раз формула одна, то достаточно вместо класса как раз таки инлайнить вот этот кусок

--aW1: 4;
--aH1: 3;
--aW2: 3;
--aH2: 4;

И уж точно не имеет смысла повторять её для каждого класса.

И ещё, если это классы картинок, а не их оберток, то картинки самостоятельно сохраняют исходные пропорции.

Следующая мысль: все ли пары симметричны?

[Вадим]

Картинки вписываются во флекс-блок pic вне зависимости от своих пропорций и их комбинаций. Но для этого надо подставить в формулу 4 значения для конкретной пары:

<div class="pic">
<img class="pic-43-34" src="pic01">
<img class="pic-43-34" src="pic02">
</div>

https://riggo.ru/Adventure/Test/Test.html

Answer 1

[Михаил Р.]

Стандартными методами 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);

Comments

[Вадим]

Очень интересно. Но не понял, как эти переменные затем вернуть в качестве аргументов в значения из примера: --aW1, --aH1...
Простите, но я только окунулся в less

[Михаил Р.]

Вадим,

Но не понял, как эти переменные затем вернуть в качестве аргументов в значения из примера: --aW1, --aH1...

Возвращать ничего не нужно, достаточно создать классы с нужными именами и значениями:

.fn(@aspect-class) {
  @matches: ~`@{aspect-class}.match(/\d+/g)`;
  @aW1: e(%(`@{matches}[0]`));
  @aH1: e(%(`@{matches}[1]`));
  @aW2: e(%(`@{matches}[2]`));
  @aH2: e(%(`@{matches}[3]`));

  .aspect-@{aspect-class} {
    & :nth-child(2n+1) {
      width: calc((@aW1 * @aH2) / ((@aW1 * @aH2) + (@aH1 * @aW2)) * 100%);
      aspect-ratio: calc(@aW1 / @aH1);
    }
    & :nth-child(2n) {
      width: calc((@aH1 * @aW2) / ((@aW1 * @aH2) + (@aH1 * @aW2)) * 100%);
      aspect-ratio: calc(@aW2 / @aH2);
    }
  }
}

.fn(aspect-43-34);

я только окунулся в less

Почему Less, а не SASS?

[Вадим]

Почему Less, а не SASS?

Трудный вопрос. До сих пор хватало css, там и переменные ввели и многое из препроцессорной истории. Но вот с этим примером с пропорциями прям засада. Поэтому почитал инфы и решил, что less для данной задачи проще в освоении. Спасибо за пример, буду пробовать и вникать

[Сергей delphinpro]

Вадим, Михаил Р., Это всё равно работает на этапе компиляции и в выходном css будет портянка классов.
По-моему, Ankhena предложила оптимальный вариант:

<div class="pic" style="--aW1:4;--aH1:3;--aW2:3;--aH2:4;">
  <img src="pic01">
  <img src="pic02">
</div>

.pic {
  --temp: calc(var(--aW1) * var(--aH2) + var(--aH1) * var(--aW2));
}
.pic > :nth-child(2n+1) {
  width: calc((var(--aW1) * var(--aH2) / var(--temp)) * 100%);
  aspect-ratio: calc(var(--aW1) / var(--aH1));
}
.pic > :nth-child(2n) {
  width: calc((var(--aH1) * var(--aW2) / var(--temp)) * 100%);
  aspect-ratio: calc(var(--aW2) / var(--aH2));
}

[Вадим]

Сергей delphinpro, придется перелопачивать все html (тысячи фото), плюс глобально править имеющиеся классы и сами дивы, потому что в них встречаются не только пары, а целые блоки картинок разных пропорций. Короче, засада еще та

[Михаил Р.]

Вадим,

Трудный вопрос. До сих пор хватало css, там и переменные ввели и многое из препроцессорной истории. Но вот с этим примером с пропорциями прям засада. Поэтому почитал инфы и решил, что less для данной задачи проще в освоении. Спасибо за пример, буду пробовать и вникать

https://2023.stateofcss.com/en-US/other-tools/#pre..., рекомендую переходить на SASS.

Сергей delphinpro,

Это всё равно работает на этапе компиляции и в выходном css будет портянка классов.

Разумеется, а автору нужно после компиляции?

[Ankhena]

Вадим, более того, мне кажется, что если использовать гриды, то высота картинок будет одинаковой автоматом => не нужно считать aspect-ratio два раза => достаточно задать три кастомки блоку обертке w1, w2, h. Первые два, наверное, можно сократить до одного, а именно коэффициента соотношения w1 к w2. И применять этот коэф при построении сетки грида через fr.

потому что в них встречаются не только пары, а целые блоки картинок разных пропорций

А вот тут начинается моё самое любимое. Когда начинает выползать дополнительная информация.

Может, вам просто взять плагинчик типа masonry (ну или кто там лучше подходит из семейства) и не парить себе мозг?

[Вадим]

Ankhena, спасибо за дельные советы. Но слишком много уже сделано. Переделывать с нуля - это не то, чего хотел изначально добиться для уменьшения имеющегося css.
Пока на перепутье: подключать препроцессор или пройти нотпадом+ по всем имеющимся html-файлам. Первое пока перевешивает.
Вопрос можно считать решенным

[Ankhena]

Вадим, ну уж не less, а scss тогда.
И это решение, которое делает двойную работу. Сначала каким-то образом задает классы, вычисляя их из размеров, а потом по классу эти размеры вычисляет в обратную сторону.