0

I am injecting CSS variables into .scss and in some cases I want that I reduce the opacity. The colours can be HEX or RGBA (depending of user selection).

I have tried some of the scss methods but it does not work.

.bg-primary {
  background-color: rgba(var(--primary), 0.5) !important;
}

This results in only white.

Also:

.bg-primary {
  background-color: transparentize(var(--primary), 0.5) !important;
}

But it gives me error:

SassError: var(--primaryBootstrapColor) is not a color.
node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/common/styles/

Packages:

 "sass": "^1.49.9",
 "sass-loader": "^12.6.0",
 "node-sass": "^6.0.1",
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
eko
  • 329
  • 2
  • 11
  • SASS knows nothing about CSS custom properties (variables). SASS is a **pre**processor; it runs before the CSS is processed, so `var(--primaryBootstrapColor)` is meaningless. – Heretic Monkey Oct 14 '22 at 17:42
  • How about CSS? Is such a thing possible with plain css. I tried in css file also rgba() but no success. – eko Oct 14 '22 at 21:32

0 Answers0