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

Question

i'm wondering if it's possible to call the css variable inside an animation mixin in sass to have a dynamic animaction color based.

I've tried a lot about interpolation in Sass,but it never succeed. the version of the mixin without de dynamic color is working but not with the dynamic css variable.

So i'm wondering if it's possible and how to achieve it?

I'm using node-sass (version: 1.22.9).

View

<ion-button class="pulse pulse-danger"></ion-button>

SCSS


# Var
--ion-color-primary: #FFFFFF;
--ion-color-danger: #000000;

/**
 * Pulse Animation
 */
@mixin animation-pulse($duration, $color-name) {

    $name: animation-pulse-#{$color-name};

    @keyframes #{$name} {
        0% {
            -moz-box-shadow: 0 0 0 0 #{"rgba(--ion-color-#{$color-name}, 0.4)"};
            box-shadow: 0 0 0 0 #{"rgba(--ion-color-#{$color-name}, 0.4)"};
        }
        70% {
            -moz-box-shadow: 0 0 0 10px #{"rgba(--ion-color-#{$color-name}, 0)"};
            box-shadow: 0 0 0 10px #{"rgba(--ion-color-#{$color-name}, 0)"};
        }
        100% {
            -moz-box-shadow: 0 0 0 0 #{"rgba(--ion-color-#{$color-name}, 0)"};
            box-shadow: 0 0 0 0 #{"rgba(--ion-color-#{$color-name}, 0)"};
        }
    }

    @-webkit-keyframes #{$name} {
        0% {
            -webkit-box-shadow: 0 0 0 0 #{"rgba(--ion-color-#{$color-name}, 0.4)"};
        }
        70% {
            -webkit-box-shadow: 0 0 0 10px #{"rgba(--ion-color-#{$color-name}, 0)"};
        }
        100% {
            -webkit-box-shadow: 0 0 0 0 #{"rgba(--ion-color-#{$color-name}, 0)"};
        }
    }

    animation-name: $name;
    animation-duration: $duration;
    animation-iteration-count: infinite;
}

.pulse {

    &:hover {
        animation: none;
    }

    &.pulse-primary {

        background: var(--ion-color-primary);
        box-shadow: 0 0 0 rgba(var(--ion-color-primary), 0.4);

        @include animation-pulse(2s, primary);
    }

    &.pulse-danger {
        background: var(--ion-color-danger);
        box-shadow: 0 0 0 rgba(var(--ion-color-danger), 0.4);

        @include animation-pulse(2s, danger);
    }

}

Actual result is not showing the pulse animation probably cause the css var is not properly set in the mixin.

If i replace in the mixin animation-pulse the color by a static value, the pulse animation is working.

score 0 · Accepted Answer · answered Sep 10 '19 at 16:09

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

You're missing the var() around the variable name inside your mixin.
You can't use hex values in rgba() for the variable. Use CSS variables with rgba for gradient transparency
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);
    }

}

Here is the compiled code with it working:

:root {
  --ion-color-primary: 255, 255, 255;
  --ion-color-danger: 0, 0, 0;
}


/**
 * Pulse Animation
 */

.pulse:hover {
  animation: none;
}

.pulse.pulse-primary {
  background: rgb(var(--ion-color-primary));
  box-shadow: 0 0 0 rgba(var(--ion-color-primary), 0.4);
  animation-name: animation-pulse-primary;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes animation-pulse-primary {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(var(--ion-color-primary), 0.4);
    box-shadow: 0 0 0 0 rgba(var(--ion-color-primary), 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(var(--ion-color-primary), 0);
    box-shadow: 0 0 0 10px rgba(var(--ion-color-primary), 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(var(--ion-color-primary), 0);
    box-shadow: 0 0 0 0 rgba(var(--ion-color-primary), 0);
  }
}

@-webkit-keyframes animation-pulse-primary {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ion-color-primary), 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(var(--ion-color-primary), 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ion-color-primary), 0);
  }
}

.pulse.pulse-danger {
  background: rgb(var(--ion-color-danger));
  box-shadow: 0 0 0 rgba(var(--ion-color-danger), 0.4);
  animation-name: animation-pulse-danger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes animation-pulse-danger {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(var(--ion-color-danger), 0.4);
    box-shadow: 0 0 0 0 rgba(var(--ion-color-danger), 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(var(--ion-color-danger), 0);
    box-shadow: 0 0 0 10px rgba(var(--ion-color-danger), 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(var(--ion-color-danger), 0);
    box-shadow: 0 0 0 0 rgba(var(--ion-color-danger), 0);
  }
}

@-webkit-keyframes animation-pulse-danger {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ion-color-danger), 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(var(--ion-color-danger), 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ion-color-danger), 0);
  }
}

<button class="pulse pulse-danger">test button big for visual</button>

Hi, your solution is perfectly working, thanks for the help and the explanation!!! — Youuri Helvetti, Sep 11 '19 at 12:58

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

1 Answers1