Is it possible to use native css functions in sass?

Question

The root of my problem is using CSS4 variables with css functions that is overridden by SASS mixins.

SASS overrides rgb and rgba to help with passing hex to them, for instance. Problem is I am using the new CSS4 spec which allows for variables.

What I want to do is:

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

Now this would work fine if SASS hadn't taken over and expect a different input.

So is it possible to override this mixin somehow, so I just get it output as a normal css value?

Answer 1

Thanks to Justinas who led me in the right direction on this question.

Although it could be argued that this is a duplicate of Named CSS grid lines with SCSS, I still want to share the solution that is more spesific to what I tried to solve.

Here is a codepen of a rather ok solution: https://codepen.io/anon/pen/LydWMd

Basically just creating a mixin that either overrides(as pointed out, not necessarely what you want unless you know you will never use the built-in sass functionality in your project) or an addition:

@function native-rgba($string, $opacity) {
  @return #{"rgba(#{$string}, #{$opacity})"};
}