Εργαλεία CSS

Ολοκληρωμένο εργαλείο CSS: μορφοποίηση/εξωράιση, σμίκρυνση/συμπύκνωση, επαλήθευση σύνταξης, μεταγλώττιση SCSS/Sass & LESS σε CSS και αντίστροφη μετατροπή CSS σε SCSS ή LESS.
Όλη η επεξεργασία γίνεται τοπικά στο πρόγραμμα περιήγησης — τα δεδομένα δεν μεταφορτώνονται ποτέ σε κανέναν διακομιστή.
Λειτουργία:
Είσοδος CSS / SCSS / LESS / SASS
Έξοδος
Χρήση: Επικόλληση του CSS/SCSS/LESS/SASS στο αριστερό πεδίο, επιλογή λειτουργίας και πάτημα του Επεξεργασία (ή απλή πληκτρολόγηση — αυτόματη επεξεργασία κατά την είσοδο).
Πώς λειτουργεί κάθε λειτουργία
Μορφοποίηση CSS: Μορφοποιεί το CSS με συνεπή εσοχή (2/4 κενά ή tabs), μία ιδιότητα ανά γραμμή. Χειρίζεται εμφωλευμένους κανόνες at όπως @media, @keyframes, @supports. Διατηρεί τα σχόλια (και τα /* */ και τα μονής γραμμής). Η αλλαγή του επιλογέα Εσοχή μεταβάλλει μεταξύ 2 κενών, 4 κενών ή tabs.
Σμίκρυνση: Αφαιρεί κάθε περιττό κενό, σχόλιο και περιττό χαρακτήρα για το πιο συμπαγές CSS. Ιδανικό για παραγωγή ώστε να μειώνεται το μέγεθος αρχείου και το εύρος ζώνης. Η γραμμή στατιστικών δείχνει τον λόγο συμπίεσης.
Επαλήθευση: Αναλύει το CSS και ελέγχει για σφάλματα σύνταξης. Αναφέρει τα σφάλματα ανάλυσης με ακριβείς αριθμούς γραμμής και στήλης. Εμφανίζει επίσης στατιστικά: πλήθος κανόνων, επιλογέων, δηλώσεων και κανόνων at.
Μορφοποίηση SCSS: Αναμορφοποιεί φύλλα στυλ SCSS/Sass με συνεπή εσοχή. Χειρίζεται όλη τη σύνταξη ειδική για το SCSS: μεταβλητές $, @mixin/@include, @extend, ροή ελέγχου @if/@for/@each, παρεμβολή #{$var} και σχόλια μονής γραμμής //. Διατηρεί τη δομή εμφωλευμένων επιλογέων και ευθυγραμμίζει σωστά τα εμφωλευμένα μπλοκ. Η αλλαγή του επιλογέα Εσοχή μεταβάλλει μεταξύ 2 κενών, 4 κενών ή tabs.
Μορφοποίηση LESS: Αναμορφοποιεί φύλλα στυλ LESS με συνεπή εσοχή. Χειρίζεται όλη τη σύνταξη ειδική για το LESS: @variables, παραμετρικά mixins, φρουρούς (when), παρεμβολή @{var}, συγχώνευση και σχόλια μονής γραμμής //. Διατηρεί τη δομή εμφωλευμένων επιλογέων και ευθυγραμμίζει σωστά τα εμφωλευμένα μπλοκ. Η αλλαγή του επιλογέα Εσοχή μεταβάλλει μεταξύ 2 κενών, 4 κενών ή tabs.
SCSS → CSS: Μεταγλωττίζει φύλλα στυλ SCSS/Sass σε απλό CSS με τον επίσημο μεταγλωττιστή Dart Sass (v1.102). Υποστηρίζει μεταβλητές ($var), εμφώλευση, mixins (@mixin, @include), συναρτήσεις, @extend, ροή ελέγχου @if/@for/@each και σύγχρονα modules Sass (@use, @forward). Ο μεταγλωττιστής Sass (~5,4 MB) φορτώνεται κατά την πρώτη χρήση αυτής της λειτουργίας.
LESS → CSS: Μεταγλωττίζει φύλλα στυλ LESS σε απλό CSS. Υποστηρίζει μεταβλητές (@var), εμφώλευση, mixins, παραμετρικά mixins, πράξεις, συναρτήσεις, φρουρούς και εισαγωγές (@import). Ο μεταγλωττιστής (~150 KB) φορτώνεται κατά την πρώτη χρήση αυτής της λειτουργίας.
SASS → CSS: Μεταγλωττίζει τη σύνταξη SASS με εσοχές (αρχεία .sass, χωρίς αγκύλες και ερωτηματικά) σε απλό CSS με το Dart Sass. Το SASS με εσοχές χρησιμοποιεί σημαντικό κενό αντί για αγκύλες, κάτι που το καθιστά πιο συμπαγές. Ο ίδιος μεταγλωττιστής Dart Sass (~5,4 MB) χειρίζεται και το SCSS και το SASS με εσοχές.
CSS → SCSS: Μετατρέπει το τυπικό CSS σε σύνταξη SCSS με αυτόματη αναδιοργάνωση εμφώλευσης. Εντοπίζει μοτίβα τύπου BEM και μεταφέρει επιλογείς .parent-child σε εμφωλευμένα μπλοκ &-child. Μετατρέπει τους περιγραφικούς επιλογείς σε εμφωλευμένους κανόνες, τους επιλογείς ψευδοκλάσεων σε &:state, και εξάγει τις επαναλαμβανόμενες προσαρμοσμένες ιδιότητες CSS σε $variables της SCSS. Αν το CSS έχει επίπεδη, επαναλαμβανόμενη δομή, το εργαλείο βοηθά στην αναδιοργάνωσή του σε καθαρότερο εμφωλευμένο SCSS.
CSS → LESS: Μετατρέπει το τυπικό CSS σε σύνταξη LESS με αυτόματη αναδιοργάνωση εμφώλευσης. Το ίδιο είδος εμφώλευσης με το CSS→SCSS: εντοπίζει επαναλαμβανόμενα μοτίβα γονέων, περιγραφικούς επιλογείς και ψευδοκλάσεις. Εξάγει επαναλαμβανόμενες προσαρμοσμένες ιδιότητες CSS σε @variables της LESS. Το αποτέλεσμα είναι καθαρός, εμφωλευμένος κώδικας LESS.
Καταρράκτης, ειδικότητα και γιατί τα στυλ συγκρούονται

Όταν πολλοί κανόνες στοχεύουν το ίδιο στοιχείο, η ειδικότητα αποφασίζει τον νικητή: τα ενσωματωμένα στυλ υπερισχύουν των id, τα id των κλάσεων, οι κλάσεις των επιλογέων στοιχείων, και η σειρά στο πηγαίο αρχείο λύνει τις ισοπαλίες. Η σημαία !important παρακάμπτει αυτή την αριθμητική — και κάνει την επόμενη παράκαμψη ακόμη δυσκολότερη.

Η ειδικότητα υπολογίζεται ανά επιλογέα, όχι αθροίζεται από το περιβάλλον — ένας πιο ειδικός κανόνας υπερισχύει ανεξάρτητα από το πού εμφανίζεται στο φύλλο στυλ.