How can I set .scss variable value at runtime?

Question

I am coding in Ionic 3, trying to develop countdown timer. I need to set .scss value at runtime. How can I do it?

.scss code

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

The value of interval and rotation may be anything like 1,2,3,4,etc.. How can I set it at runtime?

score 3 · Answer 1 · answered Jul 12 '18 at 19:00

You can't change SCSS values at runtime, but you have three options here:

Use classes that are added to your element and build these classes in the SCSS ahead of time.
Apply the styles using Javascript to your elements.
You could attempt to use a CSS variable (https://developer.mozilla.org/en-US/docs/Web/CSS/var), if it is supported by the browsers you are targeting (https://caniuse.com/#search=css%20variables).

score 2 · Answer 2 · answered Nov 05 '19 at 04:12

Manipulating CSS (SCSS so on) generally not a good idea, because it will become hard to maintain. The preferred way to do this would be using classes, as they are reusable and more readable.

like below example:

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


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

How can I set .scss variable value at runtime?

2 Answers2