Amy Ruddy
Amy Ruddy

Reputation: 83

Use SCSS/Sass color functions with :root variable

According to this page: https://stackoverflow.com/a/47625605/7564215

The following syntax will work to use a SCSS color function on a root variable; however, it does not appear to work anymore. Anyone know how to get this to work? Please do not include functions to replace syntax since this will cause a bootstrap file to not compile.

From post (does not work):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};

Upvotes: 0

Views: 30

Answers (0)

Related Questions