如何在运行时设置 .scss 变量值？答案

【问题标题】：How can I set .scss variable value at runtime?如何在运行时设置 .scss 变量值？
【发布时间】：2018-07-12 18:54:41
【问题描述】：

我在 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;
    }

interval 和 rotation 的值可以是 1、2、3、4 等。如何在运行时设置？

【问题讨论】：

标签： angular ionic3 scss-lint

【解决方案1】：

您不能在运行时更改 SCSS 值，但这里有三个选项：

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

【讨论】：

【解决方案2】：

操纵 CSS（SCSS 等）通常不是一个好主意，因为它会变得难以维护。这样做的首选方法是使用类，因为它们可重用且更具可读性。

如下例：

.blueTheme {
    .backgroundColor {
       color: blue;
    }
    .itemColor {
       color: blue;
    }
    .primaryFontColor {
       color: blue;
    }
}


.greyTheme {
    .backgroundColor {
       color: black;
    }
    .itemColor {
       color: grey;
    }
    .primaryFontColor {
       color: grey;
    }
}

【讨论】：