CSS variables not resolved correctly by functions when passed as a parameter

[lozandier]

Problem

For whatever reason, Sass con't enable the use of CSS variables within functions as expected; this is particularly problematic with color functions.

Sass Code (Used Sass 4.0 & LibSass 3.5)

html {
--google-red-100: #f4c7c3;
--dark-primary-opacity: 0.87;
}

.mytext {
  color: rgba(var(--google-red-100), var(--dark-primary-opacity));
}

Expected Result

html {
  --google-red-100: #f4c7c3;
  --dark-primary-opacity: 0.87;
}

.mytext {
  color: rgba(244, 199, 195, 0.87);
}

Actual Result

$color: "var(--google-red-100)" is not a color for `rgba'

It seems the parser doesn't resolve CSS variables when they are parameters of Sass functions

Recommended Reviewers

• @nex3 & @chriseppstein being very familiar with how Sass has evolved to support CSS variables

[nex3]

There's no way for Sass functions in general to handle CSS variables. CSS variables are resolved at runtime and are affected by the cascade and potentially by JavaScript, so their values aren't reliably available at compile-time when Sass runs. If you want to pass variables to Sass functions, they have to be Sass variables.

[lozandier]

Doh, I had a brain fart; thanks for the succinct answer

On Tue, Feb 21, 2017 at 4:08 PM Natalie Weizenbaum ***@***.***> wrote: There's no way for Sass functions in general to handle CSS variables. CSS variables are resolved at runtime and are affected by the cascade and potentially by JavaScript, so their values aren't reliably available at compile-time when Sass runs. If you want to pass variables to Sass functions, they have to be Sass variables. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2246 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABKqOCNdzHkLkWbDvXt4nFYp8EfXGZigks5re3x7gaJpZM4MFm0w> .

-- Kevin Lozandier lozandier@gmail.com <lozandier@gmail.com>