create - set scss angular cli

acceder a los valores de SASS($ colores de variables.scss) en Typescript(Angular2 ionic2)

Question

En Ionic 2, me gustaría acceder a las variables $colors desde el archivo "[mi proyecto] / src / theme / variables.scss".

Este archivo contiene:

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

En un componente, dibujo un lienzo. Se ve así:

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);
}
}

Como se puede ver, en algún punto de este código se define el color de la forma: context.fillStyle = ''blue'' , me gustaría usar algo como context.fillStyle = ''[variables.scss OBJECT].$colors.primary '' .

¿Alguien tiene una idea?

Answer 1

Desafortunadamente, no hay manera de acceder a la variable SASS directamente desde el código mecanografiado / javascript. Sin embargo, podemos hacer una solución para acceder a esas variables.

Permítanme describir brevemente los pasos para acceder a las variables SASS desde dentro del código fuente de mecanografía:

1. Creando un componente de ayuda SASS

Cree ../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);
}

En este archivo SCSS, simplemente creamos propiedades personalizadas dentro de la sección del cuerpo del DOM. Debe agregar cada variable SASS a la que desea que se pueda acceder en este archivo SCSS utilizando la combinación llamada define-custom-property que espera dos parámetros: nombre de la variable y valor de la variable.

Como ejemplo, he agregado entradas para todos los colores definidos en $colors , así como una entrada para la variable SASS $background-color definido en mi archivo theme / variables.scss . Puede agregar tantas variables como desee.

Cree ../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. Integrar el componente de ayuda SASS

A partir de ahora, podemos seguir los principios del marco Ionic2 estándar para la integración y el uso de componentes.

• Agregue el nombre de la clase del componente ( SassHelperComponent ) en la sección de declaraciones de su NgModule en app.module.ts

• Inserte el siguiente código HTML en la plantilla HTML de su página desde donde desea acceder a esas variables mágicas:

  <sass-helper></sass-helper>

3. Usando el componente auxiliar

En el archivo TS de su página, debe insertar las siguientes líneas en su clase de página:

@ViewChild(SassHelperComponent)
private sassHelper: SassHelperComponent;

Finalmente, puede leer el valor de cualquier variable SASS simplemente llamando al método de la clase secundaria de la siguiente manera:

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

Answer 2

Una posibilidad es generar un archivo .ts desde el archivo .scss . Un ejemplo simple de este proceso:

1) Instale npm i --save-dev scss-to-json .

2) Pon esto en tu package.json :

 "scripts": {
...
"scss2json": "echo /"export const SCSS_VARS = /" > src/app/scss-variables.generated.ts && scss-to-json src/variables.scss >> src/app/scss-variables.generated.ts"
},

y npm run scss2json con npm run scss2json . Los usuarios de Windows deberán ajustar el ejemplo.

3) Accede a las variables:

import {SCSS_VARS} from ''./scss-variables.generated'';
...
console.log(SCSS_VARS[''$color-primary-1'']);

Una de las ventajas de esto es que obtendrá una terminación de tipo de IDE y es un medio bastante simple para lograr su objetivo en general.

Por supuesto, puede hacer esto más avanzado, por ejemplo, haciendo que el archivo generado sea de solo lectura y colocando el script en su propio archivo .js y hacerlo funcionar en todos los sistemas operativos.