Pembolehubah SCSS
Eksport warna sebagai pembolehubah SCSS/Sass. Gunakan Pembolehubah SCSS percuma dalam talian tanpa pendaftaran, dengan hasil pantas dan pemprosesan selamat dalam pelayar.
// 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);
}Pembolehubah SCSS membantu anda bekerja dengan warna terus dalam pelayar.
Alat ini dibuat untuk pereka, pembangun dan pencipta yang memerlukan hasil pantas dan boleh dipercayai.
Supported formats
How it works
Step 1
Buka Pembolehubah SCSS
Step 2
Masukkan atau import warna
Step 3
Salin, eksport atau guna semula hasilnya
Kesilapan biasa yang perlu dielakkan
- Tidak menyemak kontras boleh menjejaskan kebolehbacaan.
- Terlalu banyak warna boleh menyukarkan penggunaan palet.
Tip pro
- Simpan warna utama sebagai pemboleh ubah CSS.
- Uji palet dalam mod terang dan gelap sebelum diterbitkan.
Privacy guaranteed: everything is processed locally in your browser.
Jika boleh, pemprosesan berlaku secara tempatan dalam pelayar. Akaun tidak diperlukan.
Pembolehubah SCSS untuk projek warna anda
Eksport warna sebagai pembolehubah SCSS/Sass.
Pembolehubah SCSS tanpa kehilangan ketepatan
Penukaran menggunakan nilai tepat (HEX, RGB, HSL, OKLCH). Tiada penghampiran visual — anda dapat warna setia kepada niat reka bentuk.
Pembolehubah SCSS percuma dalam talian
Tiada pendaftaran, tiada muat turun perisian. Pembolehubah SCSS 100% percuma dan berfungsi di mana-mana pelayar. Pelan percuma merangkumi 10 kali penggunaan sehari.
Pembolehubah SCSS pantas dan selamat
Pemprosesan berlaku terus dalam pelayar untuk kelajuan maksimum. Tiada data dihantar ke pelayan kami — warna anda kekal peribadi.
Pembolehubah SCSS untuk perkongsian dan kerjasama
Eksport hasil sebagai HEX, RGB, HSL, CSS, JSON atau salin dengan satu klik. Sesuai untuk berkongsi panduan warna dengan pasukan.
Terokai semua alat warna kami
Ekstrak, tukar, jana palet, gradien dan kontras WCAG dalam beberapa klik.
Related tools
Panduan dan tutorial
Ketahui cara menggunakan alatan kami dengan panduan terperinci kami.
scss-variables: panduan praktikal developer
Panduan setempat untuk menggunakan scss-variables, memahami amalan terbaik developer dan mengelakkan kesilapan biasa.
scss-variables: panduan praktikal developer
Panduan setempat untuk menggunakan scss-variables, memahami amalan terbaik developer dan mengelakkan kesilapan biasa.
scss-variables: panduan praktikal developer
Panduan setempat untuk menggunakan scss-variables, memahami amalan terbaik developer dan mengelakkan kesilapan biasa.