Как я могу изменить css переменную на s css тип цвета?

Question

Я добавляю css переменную к root, потому что я хочу изменить ее динамически с помощью JS

#root {
  --primary-color: #4c5b73;
}

$primary-color: var(--primary-color) !default;

.my-component {
 background-color: transparentize($primary-color, 0.85);
}

Я хочу использовать функцию Basi c s css transparentize или lighter или darker

Но я получил эту ошибку

Argument `$color` of `transparentize($color, $amount)` must be a color

Как я могу сказать, что это цвет тип?

Обновление

Я должен сделать это раньше
https://codepen.io/colton123/pen/bGVbRjP

Answer 1

Вместо объявления переменной : root сначала создается код, подобный этому. Ваш поток кода не верен. Это может помочь тебе. Вы должны изучить эту статью

$primary-color: #4c5b73;

: root{
   --primary-color: #{$primary-color};
}

.my-component {
   background-color: transparentize($primary-color, 0.85);
}

Answer 2

Вы можете просто добавить альфа-канал в обычном CSS, если вы определяете цвет, используя десятичные значения RGB вместо шестнадцатеричного кода:

:root {
  --primary-color: 76, 91, 7;
}

body {
  background-color: white;
}

.my-component {
  background-color: rgba(var(--primary-color), 0.15);
}

<div class="my-component">
  Test
</div>

Answer 3

Вы бы использовали getComputedStyle и getPropertyValue

это решение должно дать вам то, что вам нужно. :)