我想知道是否有可能在sass的动画mixin中调用css变量以使其具有动态动画颜色。
我已经尝试过很多有关Sass插值的操作,但从未成功。没有动态颜色的mixin版本可以使用,但不能使用动态css变量。
所以我想知道是否有可能以及如何实现?
我正在使用node-sass(版本:1.22.9)。
查看
<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);
}
}
实际结果未显示脉冲动画,可能是由于未在mixin中正确设置css var。
如果我将mixin动画中的脉冲替换为静态值,则该脉冲动画有效。
答案 0 :(得分:0)
是的,但是您有一些问题:
var()
。rgba()
中使用十六进制值作为变量。 Use CSS variables with rgba for gradient transparency background
属性更改为rgba
:background: rgb(var(--ion-color-danger));
这是新的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);
}
}
这是可以正常工作的编译代码:
: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>