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 などのようになります。実行時に設定するにはどうすればよいですか?