access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

Question

In Ionic 2, I would like to access the $colors variables from the file \"[my project]\\src\\theme\\variables.scss\".

This file contains:

Answer 1

I know this question is now a few years old, but I thought I'd share the solution I use. It is a more simplistic version of @mete-cantimur's answer, there is no requirement to set up any extra CSS style sheets. It will read from the loaded styles on the page instead.

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[css-helper]',
})
export class CssHelperDirective {

    element: any;

    constructor(_ref: ElementRef) {
        this.element = _ref.nativeElement;
    }

    readProperty(name: string): string {
        return window.getComputedStyle(this.element).getPropertyValue(name);
    }
}

Usage:

@ViewChild('primary', {read: CssHelperDirective})
private cssHelper: CssHelperDirective;

let color = this.cssHelper.readProperty('background-color');