Как я могу изменить цветной шестнадцатеричный код на rgba, используя только CSS?

Question

У меня небольшой вопрос, который может вызвать у меня проблему, у меня есть проект, в котором я устанавливаю переменную для цвета с помощью SASS, вот мой файл SASS __colors.scss:

$wild-watermelon: #f55463;

Когда я использую этот цвет, я делаю что-то вроде этого:

.container {
    background-color: $wild-watermelon;
}

Но у меня есть кое-что, мне нужно использовать цвет, но немного прозрачный, для этого мне нужно использовать rgba (число, число, число, 0,75).

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

Я однажды прочитал предложение, скажем, решение, предложив использовать функцию var и сделать что-то вроде этого:

 .container {
     background-color: rgba(var($wild-watermelon),0.75);
 }

Конечно, это не сработало, поэтому я здесь.

Любая помощь будет высоко ценится.

Answer 1

Попробуйте:

 $wild-watermelon: #f55463;

 .container {
   background-color: rgba($wild-watermelon, 0.75 );
 }

Если вы хотите изменить цвет, просто измените шестнадцатеричный код переменной.

Я бы предложил выбрать более общее имя (например, $ color-primary), на случай, если в будущем вы измените цветовую схему вашего проекта, поэтому вам не придется также менять имя переменной. Этот способ более удобен в обслуживании.