Sass σε CSS
Μεταγλωττίστε Sass και SCSS σε CSS online. Μετατροπή σε πραγματικό χρόνο με εκτεταμένη ή συμπιεσμένη έξοδο, αριθμούς γραμμών σφαλμάτων και πλήρη υποστήριξη μεταβλητών, mixins και εμφωλεύσεων.
Ποια είναι η διαφορά μεταξύ Sass και SCSS;
Το SCSS είναι η νεότερη, CSS-όμοια σύνταξη που χρησιμοποιεί άγκιστρα και άνω-κάτω τελείες. Η Sass (η σύνταξη με εσοχές) χρησιμοποιεί εσοχές και νέες γραμμές. Το εργαλείο μεταγλωττίζει και τις δύο - επιλέξτε απλώς σύνταξη από τη λίστα.
Ποιες δυνατότητες Sass υποστηρίζονται;
Ο μεταγλωττιστής χρησιμοποιεί την επίσημη μηχανή Dart Sass, οπότε υποστηρίζονται μεταβλητές, εμφώλευση, mixins, @include, συναρτήσεις, @use, @extend, εντολές ελέγχου όπως @if και @each, και το συμπιεσμένο στυλ εξόδου.
Πώς παίρνω συμπιεσμένο CSS;
Ορίστε το στυλ εξόδου σε Συμπιεσμένο πριν τη μεταγλώττιση. Τα περιττά κενά και ο τελευταίος διαχωριστικός χαρακτήρας αφαιρούνται, παράγοντας το μικρότερο δυνατό stylesheet.
Γιατί το σφάλμα δείχνει αριθμό γραμμής;
Όταν ο κώδικάς σας έχει συντακτικό σφάλμα, η μηχανή Sass αναφέρει την ακριβή γραμμή και στήλη αποτυχίας και το εργαλείο το εμφανίζει πάνω από την έξοδο για γρήγορη διόρθωση.
Ο κώδικάς μου Sass αποστέλλεται σε server;
Όχι. Η πλήρης μηχανή Dart Sass είναι ενσωματωμένη στη σελίδα και μεταγλωττίζει τοπικά στον browser. Τα stylesheets σας δεν φεύγουν ποτέ από τη συσκευή σας - ασφαλές ακόμη και για ιδιωτικά projects.
Μπορώ να μεταγλωττίσω @import τοπικών αρχείων;
Όχι. Ο μεταγλωττιστής δουλεύει με ένα απόσπασμα στη μνήμη και δεν έχει πρόσβαση στο σύστημα αρχείων σας, οπότε imports βάσει αρχείων και @use εξωτερικών partials δεν επιλύονται.
Λειτουργεί εκτός σύνδεσης;
Ναι. Αφού φορτώσουν μία φορά η σελίδα και το πακέτο του μεταγλωττιστή, η μεταγλώττιση γίνεται εξ ολοκλήρου στον υπολογιστή σας, χωρίς σύνδεση.
Πώς χρησιμοποιώ το αποτέλεσμα;
Αντιγράψτε το μεταγλωττισμένο CSS στο πρόχειρο ή κατεβάστε το ως style.css με τα κουμπιά κάτω από την έξοδο, και συνδέστε το στο HTML ή επικολλήστε το στο stylesheet του project σας.
Πώς να χρησιμοποιήσετε το Sass σε CSS
Αυτός ο μεταγλωττιστής εκτελεί την επίσημη μηχανή Dart Sass εξ ολοκλήρου στον browser σας. Επικολλήστε SCSS ή Sass με εσοχές και αποκτήστε καθαρό CSS αμέσως — μεταβλητές, mixins, εμφωλευση και συναρτήσεις υποστηρίζονται, τίποτα δεν αποστέλλεται.
- Επικολλήστε το Sass ή SCSS σας στο πεδίο εισόδου, ή πατήστε Παράδειγμα για να φορτώσετε ένα λειτουργικό demo με μεταβλητή και mixin.
- Επιλέξτε από τα αναπτυσσόμενα μενού τη σύνταξη (SCSS ή Sass με εσοχές) και το στυλ εξόδου (Expanded ή Compressed).
- Με ενεργή τη Ζωντανή μεταγλώττιση, το CSS εμφανίζεται καθώς πληκτρολογείτε· αλλιώς πατήστε Μεταγλώττιση για χειροκίνητη εκτέλεση.
- Αν υπάρχει συντακτικό σφάλμα, ο ακριβής αριθμός γραμμής και το μήνυμα εμφανίζονται πάνω από την έξοδο για γρήγορη διόρθωση.
- Χρησιμοποιήστε Αντιγραφή ή Λήψη κάτω από την έξοδο για να πάρετε το μεταγλωττισμένο stylesheet ως style.css.
Επιλέξτε το στυλ εξόδου Compressed για να μικρύνετε το stylesheet — ιδανικό για builds παραγωγής απευθείας από τον πηγαίο κώδικα.
Σχετικά εργαλεία
- Κοσμητής CSS Μορφοποιήστε και κοσμήστε τον κώδικα CSS άμεσα. Μετατρέψτε τον ελαχιστοποιημένο CSS σε αναγνώσιμο κώδικα με προσαρμόσιμες επιλογές.
- Ελαχιστοποιητής CSS Δωρεάν online ελαχιστοποιητής CSS. Συμπιέστε και βελτιστοποιήστε άμεσα τον κώδικα CSS αφαιρώντας κενά, σχόλια και περιττούς χαρακτήρες. Μειώστε το μέγεθος αρχείου για ταχύτερη απόδοση.
- Γεννήτρια CSS Gradient Δημιουργήστε εντυπωσιακά CSS gradient οπτικά. Δημιουργήστε γραμμικά, ακτινικά και κωνικά gradient με πολλαπλές στάσεις χρώματος, γωνίες και θέσεις. Αντιγράψτε κώδικα CSS έτοιμο για παραγωγή αμέσως.
- Γεννήτρια CSS Flexbox Οπτική γεννήτρια CSS Flexbox με ζωντανή προεπισκόπηση. Προσαρμόστε τις ιδιότητες flex και λάβετε έτοιμο κώδικα CSS.
- Υπολογιστής Chmod Δωρεάν διαδικτυακός υπολογιστής chmod για οπτικοποίηση και υπολογισμό δικαιωμάτων αρχείων Linux με πλαίσια ελέγχου. Άμεση μετατροπή μεταξύ αριθμητικής (755, 644) και συμβολικής σημειογραφίας (rwxr-xr-x). Υποστηρίζει ειδικά δικαιώματα όπως setuid, setgid, sticky bit.
- Πίνακας ASCII Πλήρης αναφορά κωδικοποίησης χαρακτήρων ASCII με δεκαδικούς, δεκαεξαδικούς, οκταδικούς, δυαδικούς κωδικούς, οντότητες HTML και περιγραφές χαρακτήρων. Άμεση αναζήτηση και φιλτράρισμα.
- Δοκιμαστής Αιτημάτων HTTP Δοκιμάστε REST API απευθείας στον περιηγητή σας. Στείλτε αιτήματα GET, POST, PUT, DELETE με προσαρμοσμένες κεφαλίδες, σώμα και παραμέτρους. Δείτε την κατάσταση, τις κεφαλίδες και το σώμα JSON άμεσα.
- Γεννήτρια .htaccess Δημιουργία κανόνων Apache .htaccess για ανακατευθύνσεις, επανεγγραφές, κεφαλίδες ασφαλείας, προσωρινή αποθήκευση και άλλα.