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.