Μορφοποιητής SCSS
Μορφοποιήστε φύλλα στυλ Sass SCSS με αυτόν τον μορφοποιητή SCSS. Επικολλήστε SCSS και το εργαλείο διαμορφώνει ένθετους κανόνες, μεταβλητές, mixins, includes, γονικούς επιλογείς και οδηγίες ελέγχου με εσοχή δύο κενών, μία δήλωση ανά γραμμή, κενό μετά τις άνω και κάτω τελείες στις ιδιότητες και προσθήκη ερωτηματικών όπου λείπουν. Οι παρεμβολές και τα σχόλια διατηρούνται, ώστε οι προγραμματιστές front end να μπορούν να τακτοποιούν μερικά αρχεία και αποσπάσματα χωρίς μεταγλώττιση.
Συχνές ερωτήσεις
Πώς λειτουργεί ο μορφοποιητής SCSS;
Διαβάζει το φύλλο στυλ ως διακριτά στοιχεία, όπως αγκύλες, ερωτηματικά, άνω και κάτω τελείες, συμβολοσειρές και σχόλια, και αναδομεί τη διάταξη βάσει αυτών. Κάθε ανοικτή αγκύλη ξεκινά ένα μπλοκ με εσοχή και κάθε δήλωση καταλαμβάνει τη δική της γραμμή.
Υποστηρίζεται η ένθεση;
Ναι, οι ένθετοι κανόνες και οι γονικοί επιλογείς όπως &:hover έχουν εσοχή ένα επίπεδο βαθύτερα από τον γονικό τους κανόνα, με δύο κενά ανά επίπεδο. Οι άνω και κάτω τελείες των επιλογέων παραμένουν στη θέση τους, οπότε το &:hover δεν χωρίζεται.
Πώς μορφοποιούνται οι μεταβλητές, τα mixins και τα includes;
Οι μεταβλητές όπως $color: #333; αποκτούν κενό μετά την άνω και κάτω τελεία, ενώ τα @mixin και @include διατηρούν τα ορίσματά τους με κενό μετά από κάθε κόμμα. Οι οδηγίες ελέγχου όπως @if, @each και @for αποκτούν κενό πριν από την παρένθεση.
Διατηρούνται οι παρεμβολές;
Ναι, οι παρεμβολές όπως #{$name} αντιγράφονται ακριβώς όπως είναι. Αυτό περιλαμβάνει παρεμβολές μέσα σε επιλογείς, όπως .icon-#{$name}, και μέσα σε ονόματα ιδιοτήτων.
Το εργαλείο μεταγλωττίζει ή επικυρώνει το SCSS μου;
Όχι, δεν μεταγλωττίζει σε CSS ούτε ελέγχει τη σύνταξη, επομένως μορφοποιεί και ημιτελή αποσπάσματα. Χρησιμοποιήστε τον μεταγλωττιστή Sass για να εντοπίσετε σφάλματα και να δημιουργήσετε CSS.
Διατηρούνται τα σχόλια;
Ναι. Τα σχόλια γραμμής που αρχίζουν με // τερματίζουν στη γραμμή τους, ενώ τα σχόλια μπλοκ διατηρούνται στη θέση όπου εμφανίζονται.
Λειτουργεί με τη σύνταξη Sass με εσοχές;
Όχι, έχει σχεδιαστεί για SCSS, που χρησιμοποιεί αγκύλες και ερωτηματικά. Τα αρχεία με σύνταξη .sass και εσοχές δεν έχουν αγκύλες για να καθορίσουν την εσοχή, οπότε μετατρέψτε τα πρώτα σε SCSS.
Μπορώ να αλλάξω την εσοχή;
Όχι, η έξοδος χρησιμοποιεί πάντα δύο κενά και ο μορφοποιητής δεν έχει επιλογές. Έτσι, το ίδιο φύλλο στυλ παράγει πάντα το ίδιο αποτέλεσμα.
Γιατί το αποτέλεσμα περικλείεται σε μπλοκ scss;
Το αποτέλεσμα επιστρέφεται ως μπλοκ κώδικα Markdown με την ένδειξη scss, ώστε να εμφανίζεται με επισήμανση σύνταξης. Αντιγράψτε τις γραμμές ανάμεσα στους οριοθέτες για το αρχείο .scss.
Πόσο μεγάλο μπορεί να είναι το φύλλο στυλ μου;
Έως 5 MB ανά εκτέλεση· μεγαλύτερη είσοδος απορρίπτεται με σχετικό μήνυμα. Το αποτέλεσμα είναι ίδιο με την επιλογή SCSS του Code Formatter.