Операции с цветами

Все арифметические операции поддерживаются для значений цветов, в которых они могут быть применены для каждого цвета в отдельности. Это означает, что операция выполняется поочередно отдельно для красной, зеленой и синей составляющей цвета. Например:

p {
  color: #010203 + #040506;
}

p 
  color: #010203 + #040506

вычислит 01 + 04 = 05, 02 + 05 = 07, и 03 + 06 = 09, в результате будет получен цвет:

p {
  color: #050709;
}

Часто полезнее использовать функции цвета, чем пытаться использовать арифметику, чтобы достичь того же эффекта. Арифметические операции между числами и цветами также работают поочередно для каждой составляющей. Например:

p {
  color: #010203 * 2;
}

p 
  color: #010203 * 2

вычислит 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06 и преобразуется в:

p {
  color: #020406;
}

Обратите внимание, что цвета с альфа-каналом (те, которые создаются через rgba или hsla функции) должны иметь одинаковое значение прозрачности для того, чтобы проводить с ними арифметические операции, поскольку арифметика не влияет на значение альфа-канала. Например:

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

p 
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75)

p {
  color: rgba(255, 255, 0, 0.75); 
}

Альфа-канал цвета можно регулировать с помощью функций opacify и transparentize. Например:

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

$translucent-red: rgba(255, 0, 0, 0.5)
p 
  color: opacify($translucent-red, 0.3)
  background-color: transparentize($translucent-red, 0.25)

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}

IE фильтры требуют, чтобы все цвета включали в себя альфа-слой, и были в строгом формате #AABBCCDD. Вы можете легко конвертировать цвет с помощью функции ie_hex_str. Например:

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
          startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

$translucent-red: rgba(255, 0, 0, 0.5)
$green: #00ff00
div
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
          startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}')

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
          startColorstr=#FF00FF00, endColorstr=#80FF0000);
}