Access SCSS variable from TypeScript

Question

I'm creating a custom directive in Angular. I have a SCSS file with variables, like the image below, which I would like to import to my directive (.directive.ts). How can I do that?

Thanks

would your mind taking the code from the pic and pasting it as text into your question? — The Fabio
– The Fabio, Commented Jan 13, 2022 at 22:52

Anton Hirov · Accepted Answer · 2022-01-13 23:13:42Z

2

Write them to custom CSS variables (you can use @each rule for lists):

:root {
  --bs-light: #f1f2f3;
  --bs-dark: #3e3e3c;
}

Use this code to read variables from the document:

export enum ScssVariables {
    Light = "light",
    Dark = "dark",
}

@Directive({
    selector: "[test-attr]",
})
export class TestDirective {
    public styles: { [key in ScssVariables]: string | null } = {
        light: null,
        dark: null,
    };

    constructor() {
        const styles = window.getComputedStyle(document.body);
        Object.keys(this.styles).forEach((key: ScssVariables) => {
            this.styles[key] = styles.getPropertyValue("--bs-" + key);
        })
        console.log(this.styles);
    }
}

answered Jan 13, 2022 at 23:13

Anton Hirov

3612 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access SCSS variable from TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related