Gewusst wie: überschreiben der ionic-sass-Variablen?

Nach dem Lesen der ionic2 Dokumentation, die wir außer Kraft setzen können, scss Variablen, und ändern Sie den Stil und die Farben der ionic2 Komponente durch überschreiben der scss-Variablen in der Variablen.scss-Datei.

Brauche ich zum ändern der hintergrund-Farbe der ionic2-Schiebe-Element.
Nach dem Lesen der Seite ionic2 theming , ich kann den hintergrund ändern, durch ändern der Farbe dieser beiden Variablen

$item-wp-sliding-content-background & $item-ios-sliding-content-background

Dies ist mein code:

$item-md-sliding-content-background: color($colors, rnbBlue);
$item-ios-sliding-content-background: color($colors,rnbBlue);

$rnbBlue: #1b5b94;

Dies ist meine app Schnittstelle:

Gewusst wie: überschreiben der ionic-sass-Variablen?

Den letzten code wird funktionieren, da sah ich den inspect-Elemente, hintergrund-Farbe geändert, um rnbBlue:

Gewusst wie: überschreiben der ionic-sass-Variablen?

Aber das Schiebe-Elemente immer noch weiß!… ich sah in die Einsicht, dass .item-md haben background:white :
Gewusst wie: überschreiben der ionic-sass-Variablen?

wenn ich deaktiviert, die background:white die Farbe geworden rnbBlue,,, ich weiß, ich kann dies überschreiben, Klasse .item-md{...} aber ich brauche nicht diese Methode, weil nicht die best-practice –

HINWEIS: ich bin mit „ionic-Winkel“: „3.6.0“,
„ionic-native“: „^2.9.0“,

Nun meine Frage:
Warum die Methode überschreiben nicht richtig funktioniert?!

Dank.

  • War meine Antwort hilfreich? Wenn ja pls akzeptieren als korrekt



One Reply
  1. 1

    Klar misundesrtood die $item-xx-sliding-content-background variable. Das ist nicht für das Element hintergrund Farbe per se, es ist der hintergrund, der erscheint, wenn Sie schieben Sie eine ion-item-sliding pass die verschiebbare Inhalte.

    Also versuchen, diesen code

    <ion-item-sliding #item>
      <ion-item>
        Item
      </ion-item>
      <ion-item-options side="right">
        <button ion-button (click)="unread(item)">Unread</button>
      </ion-item-options>
    </ion-item-sliding>

    Greifen das Element und ziehen Sie es auf de linken Seite, werden Sie sehen, dass der hintergrund werden die $rnbBlue Farbe.

    Gibt es nur eine hintergrund-Farbe für wp, finden Sie alle SASS-Variablen hier.

    Aber sagen, dass Sie nicht wollen, um das überschreiben der CSS über SCSS-Datei, weil es nicht die beste Vorgehensweise ist falsch. Sicher, aktualisieren Sie es über SASS ist schön, es ist alles organisiert und einfach zu finden, aber wenn es der einzige richtige Weg, würden wir die Variablen haben für alle möglichen CSS-Eigenschaften für jede Komponente.

    Können Sie überschreiben von CSS in den SCSS-Dateien, Sie brauchen nur zu schreiben, es in der bestmöglichen Weise.

    Wollen Sie überschreiben das Element background-color nur für diese Seite? Gehen Sie zu dieser Komponente .scss – Datei und

    my-component-tag {
      .item { /* This'll override the item for all platforms, if you want just for ios you can try .item-ios*/
        background-color: #1b5b94;
      }
    }

    Wollen Sie außer Kraft setzen, für alle, die Ihre app? So gehen Sie zu src/app/app.scss – Datei und überschreiben Sie es.

    Nur daran erinnern, seine werden bis zu Ihnen, zu organisieren Ihre app CSS-code, wenn Sie wollen, zu bleiben, um zu variabes das ist in Ordnung, aber irgendwo, es wird benötigt für die Nutzung von einigen CSS-und das ist auch in Ordnung. Wenn Sie Angst davor, ein chaotisch-code versuchen mit Hilfe BEM, es ist einfach und Sie haben eine gute und organisierte code.

    Hoffe, das hilft.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.