Как можно использовать имя CSS-класса в качестве переменной?

Question

Умар

less , css

Как можно использовать имя CSS-класса в качестве переменной?

Как извлечь данные о пропорциях из имени CSS-класса для использования в качестве переменных при задании размеров двух соседних изображений в блоке, учитывая, что класс имеет формат "aspect-X1Y1-X2Y2"? Поскольку у нас много пар изображений с различными пропорциями, было бы удобно иметь универсальную формулу, которая автоматически адаптировалась бы к данным из имени класса в HTML-разметке. Текущий подход с использованием CSS требует прописывать отдельные классы для каждой пары изображений. Можно ли реализовать это через LESS или другим способом?

11 ноября 2024 г. 9:03

Ответы на вопрос 3

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

Answer 1

Да, вы можете использовать CSS препроцессоры, такие как LESS или SASS, чтобы делать стили более динамичными и сокращать количество классов, которые вам нужно прописывать вручную.

Для извлечения данных о пропорциях из имени CSS-класса можно использовать JavaScript. Давайте рассмотрим, как это можно сделать.

1. **HTML разметка**:

У вас должно быть что-то вроде этого:

```html
<div class="aspect-16x9-4x3">
    <img src="image1.jpg" class="img-1" />
    <img src="image2.jpg" class="img-2" />
</div>
```

2. **JavaScript для извлечения пропорций**:

Теперь мы можем написать функцию на JavaScript, которая будет извлекать пропорции из имени класса:

```javascript
document.querySelectorAll('.aspect-*').forEach(container => {
    const className = container.className; // Получаем имя класса
    const regex = /aspect-(\d+)x(\d+)-(\d+)x(\d+)/; // Регулярное выражение для извлечения пропорций
    const matches = className.match(regex);

    if (matches) {
        const width1 = parseInt(matches[1], 10);
        const height1 = parseInt(matches[2], 10);
        const width2 = parseInt(matches[3], 10);
        const height2 = parseInt(matches[4], 10);

        // Вычисляем общий размер и пропорции для изображений
        const totalWidth = width1 + width2; 
        const totalHeight = Math.max(height1, height2);
        
        // Устанавливаем размеры для изображений
        const img1 = container.querySelector('.img-1');
        const img2 = container.querySelector('.img-2');

        img1.style.width = `${(width1 / totalWidth) * 100}%`;
        img1.style.height = 'auto';

        img2.style.width = `${(width2 / totalWidth) * 100}%`;
        img2.style.height = 'auto';

        // Optional: Устанавливаем высоту для родительского контейнера
        container.style.height = `${totalHeight}px`;
    }
});
```

3. **LESS для стилизации**:

При использовании LESS вы можете задать стили для изображений, используя переменные, но без JavaScript это будет гораздо сложнее адаптировать динамически. С LESS вы могли бы, например:

```less
.img-1 {
    height: auto;
}

.img-2 {
    height: auto;
}
```

Но более динамическое решение с вычислениями пропорций требует JavaScript, как показано выше.

Таким образом, с использованием JavaScript вы можете легко настраивать размеры изображений в зависимости от пропорций, указанных в имени CSS-класса, что поможет избежать создания множества отдельных классов для каждой пары изображений.

Answer 2

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

Answer 3

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