在 Typescript (Angular2 ionic2) 中访问 SASS 值(来自 variables.scss 的 $colors) [英] access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

问题描述

在 Ionic 2 中，我想从文件[my project]src hemevariables.scss"中访问 $colors 变量.

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

该文件包含:

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

在一个组件中，我绘制了一个画布.看起来像这样:

In a component, I draw a canvas. It looks like that:

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 对象].$colors.primary '.

As one can see, at some point in this code the color of the shape is defined: context.fillStyle = 'blue' , I would like to use instead something like context.fillStyle = '[variables.scss OBJECT].$colors.primary '.

有人有想法吗?

推荐答案

不幸的是，无法直接从 typescript/javascript 代码访问 SASS 变量.但是，我们可以采取一种解决方法来访问这些变量.

Unfortunately, there is no way to access SASS variable directly from typescript/javascript code. However, we can make a workaround to access those variables.

让我简要描述从打字稿源代码中访问 SASS 变量的步骤:

Let me describe briefly the steps to access SASS variables from within typescript source code:

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

Create ../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 文件中，该define-custom-property 需要两个参数:变量名和变量值.

In this SCSS file, we simply create custom properties inside the body section of the DOM. You should add each SASS variable that you want to be accessible into this SCSS file by using the mixin called define-custom-property which expects two parameters: variable name and variable value.

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

As an example, I have added entries for all the colors defined in $colors as well as an entry for the SASS variable $background-color defined in my theme/variables.scss file. You can add as many variables as you wish.

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

Create ../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 Helper 组件

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

---

2. Integrating SASS Helper Component

From now on, we can follow standard Ionic2 framework principles for component integration and usage.

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

• 将以下 HTML 代码插入到您想要访问这些魔术变量的页面的 HTML 模板中:

• Add the component class name (SassHelperComponent) into the declarations section of your NgModule in app.module.ts

• Insert the following HTML code into the HTML template of your page from where you want to access those magic variables:

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

In your page's TS file, you should insert the following lines into your page class:

@ViewChild(SassHelperComponent)
private sassHelper: SassHelperComponent;

最后，您可以通过调用子类方法来读取任何 SASS 变量的值，如下所示:

Finally, you can read the value of any SASS variable by just calling the child class method as follows:

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

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

这篇关于在 Typescript (Angular2 ionic2) 中访问 SASS 值(来自 variables.scss 的 $colors)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！