Variabili SCSS
Esporta colori come variabili SCSS/Sass. Usa Variabili SCSS gratis online, senza registrazione, con risultati rapidi e trattamento sicuro nel 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);
}Variabili SCSS ti aiuta a lavorare con i colori direttamente nel browser.
Lo strumento è pensato per designer, sviluppatori e creativi che vogliono risultati rapidi e affidabili.
Supported formats
How it works
Step 1
Apri Variabili SCSS
Step 2
Inserisci o importa i colori
Step 3
Copia, esporta o riutilizza il risultato
Errori comuni da evitare
- Dimenticare il controllo del contrasto può ridurre la leggibilità.
- Troppi colori possono rendere una palette difficile da usare.
Consigli dei professionisti
- Salva i colori principali come variabili CSS.
- Testa la palette in modalità chiara e scura prima della pubblicazione.
Privacy guaranteed: everything is processed locally in your browser.
Il trattamento avviene localmente nel browser quando possibile. Non è necessario un account.
Variabili SCSS per i tuoi progetti colore
Esporta colori come variabili SCSS/Sass.
Variabili SCSS senza perdita di precisione
Le conversioni avvengono su valori esatti (HEX, RGB, HSL, OKLCH). Nessuna approssimazione visiva: ottieni il colore fedele al tuo intento di design.
Variabili SCSS gratis online
Nessuna registrazione, nessun download. Variabili SCSS è 100% gratuito e funziona in qualsiasi browser. Il piano gratuito include 10 utilizzi al giorno.
Variabili SCSS veloce e sicuro
L'elaborazione avviene direttamente nel browser per la massima velocità. Nessun dato viene inviato ai nostri server: i tuoi colori restano privati.
Variabili SCSS per condividere e collaborare
Esporta risultati in HEX, RGB, HSL, CSS, JSON o copiali con un clic. Perfetto per condividere una guida colore con il team o documentare un design system.
Scopri tutti i nostri strumenti colore
Estrai, converti, genera palette, gradienti e contrasti WCAG in pochi clic.
Related tools
Guide e tutorial
Impara a usare i nostri strumenti con le nostre guide dettagliate.
scss-variables: guida pratica per developer
Guida localizzata per usare scss-variables, capire le buone pratiche di developer ed evitare errori comuni.
scss-variables: guida pratica per developer
Guida localizzata per usare scss-variables, capire le buone pratiche di developer ed evitare errori comuni.
scss-variables: guida pratica per developer
Guida localizzata per usare scss-variables, capire le buone pratiche di developer ed evitare errori comuni.