在 Typescript (Angular2 ionic2) 中访问 SASS 值(来自 variables.scss 的 $colors)

不幸的是，无法直接从typescript/javascript代码访问SASS变量.然而，我们可以找到一个解决方法来访问这些变量.

让我简要描述一下从typescript源代码中访问SASS变量的步骤:

1.创建SASS帮助器组件

创建../providers/sass-helper/sass-helper.component.scss个:

$prefix: "--"; //Prefix string for custom CSS properties

//Merges a variable name with $prefix
@function custom-property-name($name) {
    @return $prefix + $name;
}

// Defines a custom property
@mixin define-custom-property($name, $value) {
    #{custom-property-name($name)}: $value;
}

body {
    // Append pre-defined colors in $colors:
    @each $name, $value in $colors {
        @include define-custom-property($name, $value);
    }

    // Append SASS variables which are desired to be accesible:
    @include define-custom-property('background-color', $background-color);
}

在这个SCSS文件中，我们只需在DOM的body部分中创建自定义属性.您应该使用名为define-custom-property的mixin将希望访问的每个SASS变量添加到此SCSS文件中，它需要两个参数:变量名和变量值.

例如，我为$colors中定义的所有colors添加了条目，并为theme/variables.scss文件中定义的SASS变量$background-color添加了条目.您可以添加任意数量的变量.

创建../providers/sass-helper/sass-helper.component.ts个:

import { Component } from '@angular/core';

export const PREFIX = '--';

@Component({
    selector: 'sass-helper',
    template: '<div></div>'
})
export class SassHelperComponent {

    constructor() {

    }

    // Read the custom property of body section with given name:
    readProperty(name: string): string {
        let bodyStyles = window.getComputedStyle(document.body);
        return bodyStyles.getPropertyValue(PREFIX + name);
    }
}

2.集成SASS辅助组件

从现在起，我们可以遵循标准Ionic2框架原则进行组件集成和使用.

• 将组件类名(SassHelperComponent)添加到app.module.ts中NgModule的声明部分

• 将以下HTML代码插入页面的HTML模板，从中访问这些神奇变量:

  <sass-helper></sass-helper>

3.使用辅助组件

在页面的TS文件中，应在页面类中插入以下行:

@ViewChild(SassHelperComponent)
private sassHelper: SassHelperComponent;

最后，只需调用子类方法即可读取任何SASS变量的值，如下所示:

// Read $background-color:
this.sassHelper.readProperty('background-color');

// Read primary:
this.sassHelper.readProperty('primary');