Sass darken, lighten как правильно использовать?

Question

[McThinker]

:root
  --mainColor: #28bebd
  --text-color: #FFF
  --mainColorHover: rgba(var(--mainColor), 0.5)

Соответственно использую так:

.btn-info
  background-color: var(--mainColor)
  border-color: var(--mainColor)

  &:hover, &:active, &:focus
    background-color: var(--mainColorHover)

Но почему то цвет на hover не работает. lighten и darken с переменными css я так понял не работают. Что с rgba не так?

Answer 1

[xenonhammer]

$black: #000000
color: lighten($black, 10%)
color: darken($black, 10%)

Answer 2

[radislaw]

Когда вы пишите:
--mainColorHover: rgba(var(--mainColor), 0.5)
Css интерпретирует это как:
--mainColorHover: rgba(#28bebd, 0.5)
А теперь прочитайте документацию про rgba. Можно ли использовать такой формат?
Вам нужно переписать свойство --mainColor в валидном формате для rgba:
--mainColor: 0, 0, 0 // или любой другой цвет rgb