Using CSS Variables as SASS Function Arguments

SASS: is it possible to use variables as argument within change-color()?

If you are using a newer version of Sass to compile your CSS you can use the rgba function to change the alpha value of a color

.class {
   $color: dodgerblue;
   color: rgba($color, .4); // using alpha value   
   color: rgba($color, var(--opacity)); // using css variable
}

If you are using an older version of Sass that does not allow css variables in the rgba function you need to write a small function to handle this (note! the uppercase Rgba is to bypass the case sensitive Sass function)

@function color-alpha($color, $alpha: 1){
    @if type-of($alpha) == number { 
        @return rgba($color, $alpha); 
    } @else { 
        @return Rgba(
            red($color), 
            green($color), 
            blue($color), 
            $alpha
        );
    }
}

.class {
    $color: dodgerblue;
    color: color-alpha($color, .4); // using alpha value 
    color: color-alpha($color, var(--opacity)) // using css variable
}

Using SASS/SCSS to generate CSS variables

To give a general overview, the syntax #{…} is called interpolation and it is the only way to inject dynamic values into a CSS variable (custom property). Here is a quote from the doc:

CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.

Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.

$primary: red;
:root {
  --primary: #{$primary}; // this one works
  --primary: $primary;    // this does not
}

The error you made is to put the -- inside the interpolation curly brackets ({}). This would work:

@mixin theme() {
  @each $theme, $map in $themes {
    @if $theme == "default" {
      :root {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    } @else {
      [data-theme="#{$theme}"] {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    }
  }
}

@include theme();

Is it possible to use css3 variable as argument for SASS mixin?

Yeah you can, however, you have a few issues:

1. You're missing the var() around the variable name inside your mixin.
2. You can't use hex values in rgba() for the variable. Use CSS variables with rgba for gradient transparency
3. You will also need to change your background property on the buttons to be rgba: background: rgb(var(--ion-color-danger));

Here is the new SASS:

:root {--ion-color-primary: 255,255,255;--ion-color-danger: 0,0,0;}
/** * Pulse Animation */@mixin animation-pulse($duration, $color-name) {
    $name: animation-pulse-#{$color-name};
    @keyframes #{$name} {        0% {            -moz-box-shadow: 0 0 0 0 #{"rgba(var(--ion-color-#{$color-name}), 0.4)"};            box-shadow: 0 0 0 0 #{"rgba(var(--ion-color-#{$color-name}), 0.4)"};        }        70% {            -moz-box-shadow: 0 0 0 10px #{"rgba(var(--ion-color-#{$color-name}), 0)"};            box-shadow: 0 0 0 10px #{"rgba(var(--ion-color-#{$color-name}), 0)"};        }        100% {            -moz-box-shadow: 0 0 0 0 #{"rgba(var(--ion-color-#{$color-name}), 0)"};            box-shadow: 0 0 0 0 #{"rgba(var(--ion-color-#{$color-name}), 0)"};        }    }
    @-webkit-keyframes #{$name} {        0% {            -webkit-box-shadow: 0 0 0 0 #{"rgba(var(--ion-color-#{$color-name}), 0.4)"};        }        70% {            -webkit-box-shadow: 0 0 0 10px #{"rgba(var(--ion-color-#{$color-name}), 0)"};        }        100% {            -webkit-box-shadow: 0 0 0 0 #{"rgba(var(--ion-color-#{$color-name}), 0)"};        }    }
    animation-name: $name;    animation-duration: $duration;    animation-iteration-count: infinite;}
.pulse {
    &:hover {        animation: none;    }
    &.pulse-primary {
        background: rgb(var(--ion-color-primary));        box-shadow: 0 0 0 rgba(var(--ion-color-primary), 0.4);
        @include animation-pulse(2s, primary);    }
    &.pulse-danger {        background: rgb(var(--ion-color-danger));        box-shadow: 0 0 0 rgba(var(--ion-color-danger), 0.4);
        @include animation-pulse(2s, danger);    }
}

---

Related Topics