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 回答