FSE – Global Style in mein SASS-File einbinden

  • ulrichreto

    (@ulrichreto)


    vor 2 Jahren, 6 Monaten

    Hallo Zusammen

    Im neuen FSE gibt es ja die Global Styles. Ich habe im theme.json eine Primärfarbe angelegt, welche mir im Inspektor wie gewünscht im Body mit --wp--preset--color--primary aufgelistet wird.

    Weiter habe ich für mein Theme eine main.css-Datei, welche ich von einer SASS-Datei main.scss kompillieren lasse. In diesem Main-CSS bzw. -SASS-File nutze ich die Bootstrap-Variabeln. Dort ist für die Primärfarbe die Variable $primary vorhanden.

    Nun möchte ich nicht an zwei Orten meine Primäre Farbe hinterlegen, und Suche nach einer Lösung. Ich habe folgendes bereits probiert:
    $primary: --wp--preset--color--primary;

    Leider ergibt mir das beim Kompillieren des SASS-Files einen Error.

    Hat jemand eine Idee, wie ich es sauber lösen könnte, dass ich die Farbe nur an einem einzigen Ort pflegen muss?

Ansicht von 1 Antwort (von insgesamt 1)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 2 Jahren, 6 Monaten

    Full Site Editing und alles rund um die Erstellung von Block-Themes mit theme.json ist auch für uns hier im Support noch sehr neu. Wir bekommen leider auch nicht vorab Schulungen oder eine umfangreiche Einweisung, sondern müssen uns mit dem begnügen, was auf make.wordpress.org und in diversen Nachrichten-Feeds steht. Ich bitte deshalb um Nachsicht, wenn wir also auf Fragen wie hier nicht direkt antworten.

    Dazu kommt, dass wir hier im Support-Forum vor allem Anwendungs-Support anbieten. Für Fragen zur Enwticklung bist du wahrscheinlich auf https://wordpress.stackexchange.com/ besser aufgehoben.

    Den Error beim Kompilieren der SASS-Datei kann ich mir nur so erklären, dass der Inhalt der Variable --wp--preset--color--primary erst dynamisch aus deinen Einstellungen im neuen Theme-Editor unter „Global Style“ belegt wird, während bei der Kompilierung der SASS-Dateien die Variable unbekannt ist. Ich hätte jetzt spontan* versucht, die Variable für die Kompilierung mit 

    :root {
  --wp--preset--color--primary: red;
}

    zu definieren und zu hoffen, dass sie per Inline-Style der Global-Style-Einstellung überschrieben wird.

    (*Es ist gefühlte Ewigkeiten her, dass ich selber ein Theme erstellt und dabei SASS-Dateien verwendet habe. Gut möglich, dass mein „spontaner Einfall“ schlicht Unfug ist – in dem Fall: Sorry. In Zeugnissen steht dann „er hat sich stets bemüht“. 😆)

Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „FSE – Global Style in mein SASS-File einbinden“ ist für neue Antworten geschlossen.

Schlagwörter