Как избежать дублирования в CSS при добавлении прозрачности цвету?

Дублирование в CSS при добавлении прозрачности цвету можно избежать с помощью использования функции RGBA или HSLA.

RGBA - это сокращение от Red, Green, Blue и Alpha. Альфа-канал задает уровень прозрачности цвета, принимает значения от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

HSLA - сокращение от Hue, Saturation, Lightness и Alpha. Он позволяет задавать цвет на основе его оттенка (hue), насыщенности (saturation), яркости (lightness) и уровня прозрачности (alpha).

Вот пример использования RGBA:

div {
  background-color: rgba(255, 0, 0, 0.5); /* полностью непрозрачный красный */
}

В этом примере значение альфа-канала равно 0.5, что означает, что цвет будет полупрозрачным.

Использование HSLA выглядит следующим образом:

div {
  background-color: hsla(0, 100%, 50%, 0.5); /* полностью насыщенный красный */
}

Здесь также значение альфа-канала равно 0.5 для достижения полупрозрачного эффекта.

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

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

Пример с использованием CSS переменной:

:root {
  --transparency: 0.5;
}

div {
  background-color: rgba(255, 0, 0, var(--transparency));
}

В этом примере переменная --transparency задает уровень прозрачности, а затем она используется при определении цвета фона элемента div. Если вам нужно изменить прозрачность цвета, вы можете просто изменить значение переменной --transparency в одном месте, и это отразится на всех элементах, использующих эту переменную.

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