SCSS-Variablen
Farben als SCSS/Sass-Variablen exportieren. Nutzen Sie SCSS-Variablen kostenlos online, ohne Registrierung, mit schnellen Ergebnissen und sicherer Verarbeitung im Browser.
// Color Variables
$primary: #6366f1;
$secondary: #ec4899;
$accent: #f59e0b;
$success: #10b981;
$warning: #f59e0b;
$error: #ef4444;
// Color Map
$colors: (
"primary": $primary,
"secondary": $secondary,
"accent": $accent,
"success": $success,
"warning": $warning,
"error": $error
);
// Usage functions
@function color($name) {
@return map-get($colors, $name);
}
// Generate utility classes
@each $name, $color in $colors {
.bg-#{$name} {
background-color: $color;
}
.text-#{$name} {
color: $color;
}
.border-#{$name} {
border-color: $color;
}
}// SCSS Mixins
@mixin background($color) {
background-color: $color;
@if lightness($color) > 50% {
color: #1a1a1a;
} @else {
color: #ffffff;
}
}
@mixin button-variant($bg, $hover: darken($bg, 10%)) {
background-color: $bg;
border-color: $bg;
@if lightness($bg) > 50% {
color: #1a1a1a;
} @else {
color: #ffffff;
}
&:hover {
background-color: $hover;
border-color: $hover;
}
}
// Usage
.my-button {
@include button-variant($primary);
}
.my-section {
@include background($secondary);
}SCSS-Variablen hilft Ihnen, Farben direkt im Browser zu bearbeiten.
Das Werkzeug ist für Designer, Entwickler und Kreative gedacht, die schnelle und zuverlässige Ergebnisse brauchen.
Supported formats
How it works
Step 1
Öffnen Sie SCSS-Variablen
Step 2
Geben Sie Farben ein oder importieren Sie sie
Step 3
Kopieren, exportieren oder verwenden Sie das Ergebnis erneut
Häufige Fehler vermeiden
- Ohne Kontrastprüfung kann die Lesbarkeit leiden.
- Zu viele Farben können eine Palette schwer nutzbar machen.
Profi-Tipps
- Speichern Sie Hauptfarben als CSS-Variablen.
- Testen Sie die Palette vor der Veröffentlichung im hellen und dunklen Modus.
Privacy guaranteed: everything is processed locally in your browser.
Die Verarbeitung erfolgt nach Möglichkeit lokal im Browser. Kein Konto erforderlich.
SCSS-Variablen für Ihre Farbprojekte
Farben als SCSS/Sass-Variablen exportieren.
SCSS-Variablen ohne Präzisionsverlust
Konvertierungen erfolgen mit exakten Werten (HEX, RGB, HSL, OKLCH). Keine visuelle Annäherung: Sie erhalten die Farbe genau wie geplant.
SCSS-Variablen kostenlos online
Keine Registrierung, keine Software-Installation. SCSS-Variablen ist 100% kostenlos und funktioniert in jedem Browser. Der kostenlose Plan umfasst 10 Nutzungen pro Tag.
SCSS-Variablen schnell und sicher
Die Verarbeitung erfolgt direkt im Browser für maximale Geschwindigkeit. Keine Daten werden an unsere Server gesendet: Ihre Farben bleiben privat.
SCSS-Variablen für Teilen und Zusammenarbeit
Exportieren Sie Ergebnisse als HEX, RGB, HSL, CSS, JSON oder kopieren Sie sie mit einem Klick. Ideal für Team-Farbleitfäden oder Design-System-Dokumentation.
Entdecken Sie alle unsere Farbwerkzeuge
Extrahieren, konvertieren, Paletten, Verläufe und WCAG-Kontraste mit wenigen Klicks erzeugen.
Related tools
Anleitungen und Tutorials
Lernen Sie, unsere Werkzeuge mit unseren detaillierten Anleitungen zu verwenden.
scss-variables: praktischer Leitfaden für developer
Lokalisierter Leitfaden zur Nutzung von scss-variables, mit Best Practices für developer und häufigen Fehlern.
scss-variables: praktischer Leitfaden für developer
Lokalisierter Leitfaden zur Nutzung von scss-variables, mit Best Practices für developer und häufigen Fehlern.
scss-variables: praktischer Leitfaden für developer
Lokalisierter Leitfaden zur Nutzung von scss-variables, mit Best Practices für developer und häufigen Fehlern.