Zurück

Exportieren Sie die Farbpalette in die SCSS/LESS/CSS-Variablendatei

Jede Palette auf ColorsWall lässt sich als Datei oder als fertige Variablen herunterladen, sodass dieselben Farben in Ihrem Design-Tool und in Ihrem Code landen.

So exportieren Sie die Farbpalette in eine SCSS/LESS/CSS-Variablendatei?
  1. Finden Sie Ihre Palette oder erstellen Sie eine neue
  2. Link mit Palette öffnen (Zum Beispiel: Bootstrap 4 Farben )

    Das funktioniert auf jeder Palettenseite, ob es Ihre eigene ist oder die eines anderen Nutzers.

  3. Klicken Sie auf die Schaltfläche „Exportieren“.

    Im Tab «Dateien» laden Sie die Palette als ASE (Adobe Swatch Exchange, für Photoshop und Illustrator), SVG oder JSON herunter. Die Tabs CSS, SCSS und LESS zeigen die Farben als Variablen, und der Tab «Farben» liefert eine einfache Liste der HEX-Codes als .txt-Datei.

    So exportieren Sie die Farbpalette in eine SCSS/LESS/CSS-Variablendatei
  4. Wählen Sie den Dateityp SCSS, LESS oder CSS und klicken Sie auf die Schaltfläche „Herunterladen“.

    Die Variablen erhalten ihre Namen aus den Farbnamen der Palette, zum Beispiel --color-sky-blue, oder werden als --color-1, --color-2 durchnummeriert, wenn eine Farbe keinen Namen hat. Die CSS-Datei fasst sie in :root zusammen und funktioniert daher sofort.

  5. Datei speichern und genießen.
Exportieren Sie die Farbpalette in die SCSS/LESS/CSS-Variablendatei Videoanleitung

Lieber zuschauen? Das Video unten zeigt Schritt für Schritt, wie Sie eine Palette exportieren.