2017-05-29 2 views
2

Wie kann ich in variables.scss meine Grundfarbe gesetzt ich es so nicht tun können:Ionic 2 - erstellen primäre Farbverlauf

variables.scss:

$colors: (
    // primary: #4caefe, 

    primary2: linear-gradient(to right, #0fe2f3, #4caefe), 
    secondary: #32db64, 
    danger:  #f53d3d, 
    light:  #fff, 
    dark:  #222, 
    background: #f7f7f7 
); 

dies ist die Fehlermeldung:

[12:53:30] sass: ...top/GitHub/plenumo-ionic2/node_modules/ionic-angular/themes/ionic.functions.scss, line: 109 
      The map color `primary` is not defined. Please make sure the color exists in your `$colors` map. For 
      example: $colors: (primary: #327eff); 

    L109: @error $error-msg; 

Wie stelle ich die Primärfarbe auf den Farbverlauf ein, den ich einstellen möchte?

Und hier ist der Code, wo ich die Variable verwenden:

.play-btn { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 60px; 
    height: 60px; 
    border: 1px solid map-get($colors, primary); 
    border-radius: 50%; 
    background-color: transparent; 
    background: map-get($colors, primary2); 

    .ion-md-icon-play_1 { 
     margin-left: 3px; 
    } 
} 

Es ist nicht möglich, einfach die primäre Variable zu ändern, damit es auf jedem Element verwendet wird, die primäre Variable verwendet? Da Gradienten funktioniert nur auf backround property

+0

Welche Version verwenden Sie? – llobet

+0

Es sieht aus wie das Problem ist, wie Sie die Farbe eines Elements als primäres setzen, anstatt wie Sie es initialisieren. –

+0

@suraj Ich habe versucht, eine andere Variable 'primary2' zum Beispiel zu erstellen, und dann als Hintergrund zuweisen Bild aber immer noch den gleichen Fehler – Sreinieren

Antwort

0

Es ist gut eingestellt. Vielleicht die Farbe, die Sie einige Probleme haben ...

bekommen
$colors: (
    primary: linear-gradient(#0fe2f3, #4caefe), 
    secondary: #32db64, 
    danger:  #f53d3d, 
    light:  #fff, 
    dark:  #222, 
    background: #f7f7f7 
); 

.color{ 
    background-image: map-get($colors, primary); 
} 
+0

immer noch der gleiche Fehler .. – Sreinieren

0

Zuerst versuchen in der Karte zu entfernen oder umbenennen „Hintergrund“ -Taste, kann es zu einem Fehler führen, denke ich. Auf andere Weise funktioniert Ihr Code einwandfrei, Sie können die Ausgabe here überprüfen. Gib mir die Fehlermassage mit aktivem "Primär" -Schlüssel, wenn es dir nicht geholfen hat.