Question

我想知道是否有可能在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动画中的脉冲替换为静态值，则该脉冲动画有效。

Answer 1

是的，但是您有一些问题：

您在混合中缺少变量名周围的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>

是否可以将css3变量用作SASS mixin的参数？

1 个答案: