accédez aux valeurs SASS ($colors from variables.scss) en caractères typographiques (Angular2 ionic2)

Ionique Dans les 2, je voudrais accéder à l' $colors variables du fichier "[mon projet]srcthemevariables.scss".

Ce fichier contient:

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

Dans un composant, je dessine une toile. Il ressemble à ça:

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

}

comme on peut le voir, à un moment donné dans ce code la couleur de la forme est définie:context.fillStyle = 'blue' , je voudrais l'utiliser à la place quelque chose comme context.fillStyle = '[variables.scss OBJECT].$colors.primary '.

quelqu'un A une idée?

22
demandé sur nyluje 2016-11-04 12:08:41

2 réponses

malheureusement, il n'y a aucun moyen d'accéder à la variable SASS directement à partir du code typescript/javascript. Cependant, nous pouvons faire une solution de contournement pour accéder à ces variables.

Permettez-moi de décrire brièvement les étapes pour accéder aux variables SASS à partir du code source dactylographié:

1. La création d'un SASS aide Composante

Créer ../fournisseurs/sass-helper/sass-helper.composant.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);
}

dans ce fichier SCSS, nous créez simplement des propriétés personnalisées à l'intérieur du corps section du DOM. Vous devez ajouter chaque variable SASS que vous voulez être accessible dans ce fichier SCSS en utilisant le mixindefine-custom-property qui s'attend à deux paramètres: nom de la variable et valeur de la variable.

par exemple, j'ai ajouté des entrées pour tous les couleurs définie dans $colors ainsi qu'une entrée pour la variable SASS $background-color définie dans mon thème / variables.scss fichier. Vous pouvez ajouter autant de variables que vous le souhaitez.

Créer ../fournisseurs/sass-helper/sass-helper.composant.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. Intégration de la composante Helper SASS

a Partir de maintenant, nous pouvons suivre la norme Ionic2 les principes d'un cadre pour le volet de l'intégration et de l'utilisation.

  • ajouter le nom de classe de la composante (SassHelperComponent) dans la section Déclarations de votre NgModule app.module.ts

  • insérez le code HTML suivant dans le modèle HTML de votre page d'où vous voulez accéder à ces variables magiques:

    <sass-helper></sass-helper>

3. Utiliser Le Composant Helper

dans le fichier TS de votre page, vous devez insérer les lignes suivantes dans votre classe de la page:

@ViewChild(SassHelperComponent)
private sassHelper: SassHelperComponent;

enfin, vous pouvez lire la valeur de n'importe quelle variable SASS en appelant simplement la méthode de classe enfant comme suit:

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

// Read primary:
this.sassHelper.readProperty('primary');
25
répondu Mete Cantimur 2016-12-28 00:01:51

Une possibilité est de création.ts le fichier à partir de la .scss fichier. Un exemple simple de ce processus:

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

2) Mettez ceci dans votre 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"
  },

et l'exécuter avec npm run scss2json. Les utilisateurs de Windows devront ajuster l'exemple.

3) Accédez aux variables:

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

un avantage de ceci est, que vous obtiendrez l'achèvement de type D'IDE et c'est un moyen assez simple pour atteindre votre objectif en général.

bien sûr, vous pouvez rendre cela plus avancé, par exemple en faisant le fichier généré en lecture seule et en mettant le script dans son propre .js classez et faites en sorte que cela fonctionne sur tous les systèmes D'exploitation.

1
répondu bersling 2018-06-06 06:17:59