Ausgangslage:
Wenn man die Farben als Variablen in einer SCSS-Datei anlegt, sollte man RGB-Werte verwenden, damit man die Farbe auch mit einer Transparenz verwenden kann:

:root {
  --black: 0,0,0;
}

.item {
  background-color: rgba(var(--black),0.5);
}

Das ist natürlich bei Farben wie schwarz und weiss einfach, bei anderen wird das kompliziert, vor allem, wenn man leichte Nuancen ändern möchte, da bei RGB-Werten kein Color-Picker oder sonstige Plug-Ins in Editoren wie Visual Studio Code zur Verfügung stehen.

Lösung:
Man legt die Farben als Hex-Werte an und wandelt sie mittels Formel automatisch um. Vorteil ist, dass man weiterhin für die Hex-Werte den Color-Picker verwenden und somit einfacher Anpassungen machen kann.

$black: #000000;

@function rgb-components($c) {
 @return #{color.channel($c, "red", $space: rgb)},
 #{color.channel($c, "green", $space: rgb)},
 #{color.channel($c, "blue", $space: rgb)};
}

:root {
  --black1: #{rgb-components($black)};
  --black2: rgba(#{rgb-components($black)},0.5);
}

.item1 {
  background-color: rgba(var(--black),0.5);
}
.item2 {
  background-color: var(--black2);
}