CODEWITHSUNDEEP
csswebpacksass
MAZ
MAZ

Reputation: 901

How to user relative colors with SASS?

I want to use relative colors in my project made with Nuxt.

When I add this line of code:

  background-color: rgb(from var(--color) r g b / .5);

SASS throws this error: SassError: Only 3 elements allowed, but 5 were passed.

Is there any way to bypass it?

Upvotes: 1

Views: 514

Answers (2)

Igor
Igor

Reputation: 11

I had the exact same case and issue, and a workaround I found was to use the unquote-function of sass.

$color: 'rgb(from var(--color) r g b / .5'
background-color: unquote($color);

An alternative setup was to add a CSS file to my Angular project, but this was a bit more clean.

I'm wondering though when relative css colors will be fully implemented in SASS. I did find this related issue: https://github.com/sass/sass/issues/3673.

Upvotes: 1

Rok Benko
Rok Benko

Reputation: 23078

You want to use rgba (not rgb) like this:

background-color: rgba(var(--color), 0.5);

EDIT

background-color: rgba(var(--color), 0.5) !important;

Upvotes: 0

Related Questions