angular - 如何在运行时设置 .scss 变量值？

Question

我正在 Ionic 3 中编码，尝试开发倒计时器。我需要在运行时设置 .scss 值。我该怎么做？

.scss代码

$d: 300;
$w: 20;
$interval: 2;
$rotation: 1;

&:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: $w+px solid #fff;
        -webkit-animation-duration: $interval+s;
        -webkit-animation-iteration-count: $rotation;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: forwards;
    }

间隔和旋转的值可以是 1,2,3,4 等任何值。如何在运行时设置它？

Answer 1

您无法在运行时更改 SCSS 值，但这里有三个选项:

1. 使用添加到元素中的类，并提前在 SCSS 中构建这些类。
2. 使用 Javascript 将样式应用到您的元素。
3. 如果您的目标浏览器 ( https://developer.mozilla.org/en-US/docs/Web/CSS/var ) 支持 CSS 变量 ( https://caniuse.com/#search=css%20variables )，您可以尝试使用该变量。