SCSS Μεταβλητές
Εξάγετε χρώματα ως SCSS/Sass μεταβλητές. Χρησιμοποιήστε το SCSS Μεταβλητές δωρεάν online, χωρίς εγγραφή, με γρήγορα αποτελέσματα και ασφαλή επεξεργασία στον 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 Μεταβλητές σας βοηθά να δουλεύετε με χρώματα απευθείας στον browser.
Το εργαλείο έχει σχεδιαστεί για designers, developers και δημιουργούς που χρειάζονται γρήγορα και αξιόπιστα αποτελέσματα.
Supported formats
How it works
Step 1
Ανοίξτε το SCSS Μεταβλητές
Step 2
Εισαγάγετε ή εισάγετε τα χρώματά σας
Step 3
Αντιγράψτε, εξάγετε ή επαναχρησιμοποιήστε το αποτέλεσμα
Συνηθισμένα λάθη προς αποφυγή
- Η παράλειψη ελέγχου αντίθεσης μπορεί να βλάψει την αναγνωσιμότητα.
- Τα πολλά χρώματα κάνουν μια παλέτα δυσκολότερη στη χρήση.
Συμβουλές από ειδικούς (Pro tips)
- Κρατήστε τα βασικά χρώματα ως CSS variables.
- Δοκιμάστε την παλέτα σε light και dark mode πριν τη δημοσίευση.
Privacy guaranteed: everything is processed locally in your browser.
Όποτε είναι δυνατό, η επεξεργασία γίνεται τοπικά στον browser. Δεν απαιτείται λογαριασμός.
SCSS Μεταβλητές για τα χρωματικά σας έργα
Εξάγετε χρώματα ως SCSS/Sass μεταβλητές.
SCSS Μεταβλητές χωρίς απώλεια ακρίβειας
Οι μετατροπές βασίζονται σε ακριβείς τιμές (HEX, RGB, HSL, OKLCH). Χωρίς οπτική προσέγγιση — λαμβάνετε το χρώμα πιστό στην πρόθεση του design.
SCSS Μεταβλητές δωρεάν online
Χωρίς εγγραφή, χωρίς λήψη λογισμικού. Το SCSS Μεταβλητές είναι 100% δωρεάν και λειτουργεί σε κάθε browser. Το δωρεάν πλάνο περιλαμβάνει 10 χρήσεις την ημέρα.
SCSS Μεταβλητές γρήγορα και με ασφάλεια
Η επεξεργασία γίνεται απευθείας στον browser για μέγιστη ταχύτητα. Κανένα δεδομένο δεν στέλνεται στους servers — τα χρώματά σας παραμένουν ιδιωτικά.
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 και συχνά λάθη.