SCSS променливи
Експортирайте цветове като SCSS/Sass променливи. Използвайте SCSS променливи безплатно онлайн, без регистрация, с бързи резултати и сигурна обработка в браузъра.
// 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 променливи ви помага да работите с цветове директно в браузъра.
Инструментът е създаден за дизайнери, разработчици и творци, които искат бързи и надеждни резултати.
Supported formats
How it works
Step 1
Отворете SCSS променливи
Step 2
Въведете или импортирайте цветове
Step 3
Копирайте, експортирайте или използвайте резултата отново
Чести грешки, които да избягвате
- Пропускането на проверка на контраста може да влоши четимостта.
- Твърде много цветове могат да направят палитрата трудна за използване.
Професионални съвети
- Запазете основните цветове като CSS променливи.
- Тествайте палитрата в светъл и тъмен режим преди публикуване.
Privacy guaranteed: everything is processed locally in your browser.
Когато е възможно, обработката се извършва локално в браузъра. Не е нужен акаунт.
SCSS променливи за вашите цветови проекти
Експортирайте цветове като SCSS/Sass променливи.
SCSS променливи без загуба на точност
Преобразуванията използват точни стойности (HEX, RGB, HSL, OKLCH). Без визуално приближение — получавате цвета вярно на дизайнерското намерение.
SCSS променливи безплатно онлайн
Без регистрация и без сваляне на софтуер. SCSS променливи е 100% безплатен и работи във всеки браузър. Безплатният план включва 10 употреби на ден.
SCSS променливи бързо и сигурно
Обработката се извършва директно в браузъра за максимална скорост. Никакви данни не се изпращат до сървъри — вашите цветове остават поверителни.
SCSS променливи за споделяне и сътрудничество
Експортирайте резултатите като HEX, RGB, HSL, CSS, JSON или ги копирайте с едно кликване. Идеално за споделяне на цветово ръководство с екипа.
Открийте всички наши инструменти за цветове
Извличайте, конвертирайте, създавайте палитри, градиенти и WCAG контрасти с няколко клика.
Related tools
Ръководства и уроци
Научете как да използвате нашите инструменти с нашите подробни ръководства.
scss-variables: практическо ръководство за developer
Локализирано ръководство за scss-variables, добри практики за developer и чести грешки.
scss-variables: практическо ръководство за developer
Локализирано ръководство за scss-variables, добри практики за developer и чести грешки.
scss-variables: практическо ръководство за developer
Локализирано ръководство за scss-variables, добри практики за developer и чести грешки.