2

我在 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 等。我如何在运行时设置它？

4

2 回答 2

3

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

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

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

像下面的例子：

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


.greyTheme {
    .backgroundColor {
       color: black;
    }
    .itemColor {
       color: grey;
    }
    .primaryFontColor {
       color: grey;
    }
}
于 2019-11-05T04:12:10.363 回答