CSS Variable definieren bzw hinzufügen

  • Guten Abend,

    ich stehe gerade etwas auf dem Schlauch. Das ganze ist bei mir leider schon etwas her, weshalb ich gerade nicht mehr auf einen Nenner komme.
    Im Stil Editor kann man ja z.B. folgende Variable "$wcfContentBackground" beim eigenen CSS nutzen, bsp: color: $wcfContentBackground. Ändert man also die Farbe, ändert es sich überall wo man diese Variable benutzt hat.

    Man konnte (oder kann) ja auch eigene Variablen hinzufügen und diesen entsprechend Eigeneschaften hinzufügen. Welche im Stil benutzt werden konnte.
    Ändert man von dieser den Wert, dann ändert es sich überall wo sie benutzt wurde.
    Ich habe gerade leider keinen Stil mehr zu Hand wo ich das damals genutzt habe. Weshalb ich euch fragen muss.

    Ich habe nämlich folgendes vor. Ich setze die Variable "wcfTRLevelGradient" und dieser wird folgende Eigentschaft zugeweisen "linear-gradient(0deg, rgba(208,208,208,1) 0%, rgba(94,94,94,1) 100%);". Somit habe ich überall wo ich den gleichen Wert nutzen will, entsprechend aufgeräumten CSS Code und muss nur einen Wert ändern, anstatt mehrfach im CSS.

    Folgend dürfte man diese ja teilweise definieren können, soviel ich noch im Kopf habe, nur ich weiß gerade nicht mehr, wie es angesprochen wird.

    Code
    wcfTRLevelGradient: linear-gradient(0deg, rgba(208,208,208,1) 0%, rgba(94,94,94,1) 100%);

    Benutzt wird es ja dann theoretisch folgendermasen "background: $wcfTRLevelGradient", wenn man es als Basis vom WCF nimmt.

    Hätte jemand gerade einen Tipp für mich? Wie das ganze genau aussehen muss? Mein Stand ist leider gut 6-8 Jahre alt ?(
    Vielen Dank schon mal :)

  • Eigentlich reicht einfach:

    Code: style.scss
    $wcfTRLevelGradient: linear-gradient(0deg, rgba(208,208,208,1) 0%, rgba(94,94,94,1) 100%);

    ...im "Individuelles CSS und SCSS" und dann kannst du es mit $wcfTRLevelGradient an den entsprechenden Stellen ansprechen.
    Sofern ich dich richtig verstanden habe.

    Med venlig hilsen / Regards,

    Alex

  • Unter 6.0 bietet sich die Nutzung von Custom Properties anstelle von SCSS Variablen an:

    CSS
    :root {
    	--wcfTRLevelGradient: linear-gradient(0deg, rgba(208,208,208,1) 0%, rgba(94,94,94,1) 100%);
    }
    
    .class {
    	background: var(--wcfTRLevelGradient);
    }
  • Danke dir für den Hinweis.
    Aber dazu hätte ich noch eine Frage, was ist da anders? Bzw ist natürlich sicher sinnvoller dies zu nutzen, aber was ist da der Unterschied? :)

  • Zunächst einmal: Benutze bitte nicht das wcf-Präfix! :)

    Zu den CSS-Variablen: Das ist natives CSS und wird dynamisch ausgewertet, du kannst die Wert live ändern und per CSS-Selektor auch überschreiben.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • Ganz vereinfacht gesagt: SCSS wird zu CSS kompiliert, somit steht dir am Ende nicht mehr die Variable zur Verfügung, sondern nur noch die Eigenschaften und Werte, die der Variable zugeteilt wurden.

    Das Ganze kannst du einfach nachstellen, in dem du einfach ein Element untersuchst, welchem du eine SCSS Variable zugewiesen hast. Hinterher machst du das Gleiche mit einer Custom Property.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!