angular - 在 Typescript (Angular2 ionic2) 中访问 SASS 值($colors from variables.scss)

Question

在 Ionic 2 中，我想访问文件“[my project]\src\theme\variables.scss”中的 $colors 变量。

此文件包含:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B
);

在一个组件中，我绘制了一个 Canvas 。看起来像这样:

import {Component, Input, ViewChild, ElementRef} from '@angular/core';

@Component({
    selector: 'my-graph',
})
@View({
    template: `<canvas #myGraph class='myGraph'
     [attr.width]='_size'
     [attr.height]='_size'></canvas>`,
})

export class MyGraphDiagram {
    private _size: number;

    // get the element with the #myGraph on it
    @ViewChild("myGraph") myGraph: ElementRef; 

    constructor(){
        this._size = 150;
    }

    ngAfterViewInit() { // wait for the view to init before using the element

      let context: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d");
      // HERE THE COLOR IS DEFINED AND I D LIKE TO ACCESS variable.scss TO DO THAT
      context.fillStyle = 'blue';
      context.fillRect(10, 10, 150, 150);
    }

}

正如你所看到的，在这段代码中的某个时刻，形状的颜色被定义为:context.fillStyle = 'blue' ，我想使用类似 context 的东西。 fillStyle = '[variables.scss OBJECT].$colors.primary '.

有人有想法吗？

Answer 1

不幸的是，无法直接从 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 中定义的所有颜色 添加了条目。以及 SASS 变量 $background-color 的条目在我的 theme/variables.scss 文件中定义。您可以根据需要添加任意数量的变量。

创建 ../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');