Zmienne SCSS
Eksportuj kolory jako zmienne SCSS/Sass. Używaj Zmienne SCSS za darmo online, bez rejestracji, z szybkimi wynikami i bezpiecznym przetwarzaniem w przeglądarce.
// 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);
}Zmienne SCSS pomaga pracować z kolorami bezpośrednio w przeglądarce.
Narzędzie jest stworzone dla projektantów, programistów i twórców, którzy potrzebują szybkich i wiarygodnych wyników.
Supported formats
How it works
Step 1
Otwórz Zmienne SCSS
Step 2
Wpisz lub zaimportuj kolory
Step 3
Skopiuj, wyeksportuj lub użyj wyniku ponownie
Częste błędy, których należy unikać
- Brak sprawdzenia kontrastu może pogorszyć czytelność.
- Zbyt wiele kolorów może utrudnić użycie palety.
Wskazówki pro
- Zapisz główne kolory jako zmienne CSS.
- Przetestuj paletę w trybie jasnym i ciemnym przed publikacją.
Privacy guaranteed: everything is processed locally in your browser.
Gdy to możliwe, przetwarzanie odbywa się lokalnie w przeglądarce. Konto nie jest wymagane.
Zmienne SCSS dla Twoich projektów kolorystycznych
Eksportuj kolory jako zmienne SCSS/Sass.
Zmienne SCSS bez utraty precyzji
Konwersje używają dokładnych wartości (HEX, RGB, HSL, OKLCH). Bez aproksymacji wizualnej — otrzymujesz kolor wierny zamiarom projektowym.
Zmienne SCSS za darmo online
Bez rejestracji, bez pobierania oprogramowania. Zmienne SCSS jest w 100% darmowy i działa w każdej przeglądarce. Darmowy plan obejmuje 10 użyć dziennie.
Zmienne SCSS szybko i bezpiecznie
Przetwarzanie odbywa się bezpośrednio w przeglądarce dla maksymalnej szybkości. Żadne dane nie są wysyłane na nasze serwery — Twoje kolory pozostają prywatne.
Zmienne SCSS do udostępniania i współpracy
Eksportuj wyniki jako HEX, RGB, HSL, CSS, JSON lub skopiuj jednym kliknięciem. Idealne do dzielenia się przewodnikiem kolorystycznym z zespołem.
Odkryj wszystkie nasze narzędzia kolorów
Wyodrębniaj, konwertuj, generuj palety, gradienty i kontrasty WCAG w kilka kliknięć.
Related tools
Poradniki i tutoriale
Dowiedz się, jak korzystać z naszych narzędzi dzięki szczegółowym poradnikom.
scss-variables: praktyczny przewodnik developer
Zlokalizowany przewodnik po scss-variables, dobrych praktykach developer i typowych błędach.
scss-variables: praktyczny przewodnik developer
Zlokalizowany przewodnik po scss-variables, dobrych praktykach developer i typowych błędach.
scss-variables: praktyczny przewodnik developer
Zlokalizowany przewodnik po scss-variables, dobrych praktykach developer i typowych błędach.