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

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

Answer 1

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

如以下示例所示：

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


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

Answer 2

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

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

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

2 个答案: