Πώς να μετατρέψετε το παλιό CSS σε λιγότερο
Έχουμε καλύψει πολλά από τα βασικά στοιχεία για λιγότερα στις προηγούμενες θέσεις μας. Εάν ακολουθήσατε τη σειρά ΜΑΙΟΣ, πιστεύουμε ότι σε αυτό το σημείο έχετε ήδη μια καλή ιδέα για το πώς να χρησιμοποιήσετε το Μεταβλητές, Mixins και Λειτουργία σε λιγότερο.
Αναφέραμε επίσης πώς να μετατρέψετε το LESS σε κανονικό CSS, με μια εφαρμογή ή έναν μεταγλωττιστή. Αλλά, πώς κάνουμε το αντίθετο? για να μετατρέψετε το CSS σε λιγότερο; Αυτή η συμβουλή είναι για εσάς.
Χρησιμοποιώντας ένα εργαλείο
Με την αυξανόμενη δημοτικότητα του Προεπεξεργαστής CSS, μερικά νέα εργαλεία και εφαρμογές που αποσκοπούν ουσιαστικά στη διευκόλυνση της ζωής του σχεδιαστή του ιστού ή του προγραμματιστή, όπως το εργαλείο αυτό: CSS2Less.
Αυτό το εργαλείο μας επιτρέπει να μετατρέψουμε το κανονικό CSS σε λιγότερο. Ας δοκιμάσουμε λοιπόν. Έχω τους ακόλουθους κανόνες CSS από το παλιό μου αρχείο για μετατροπή.
nav ύψος: 40px; πλάτος: 100%. φόντο: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; περιθώριο: 0 αυτόματο; nav li εμφάνιση: εν σειρά · float: αριστερά. nav a χρώμα: #fff; εμφάνιση: inline-block πλάτος: 100px; σκιά κειμένου: 1px 1px 0px # 000; nav li a border-right: 1px στερεό #fff; μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? nav li: τελευταίο παιδί a border-right: 0; nav a: hover, nav a: ενεργό χρώμα-φόντου: #fff;
Εδώ είναι το αποτέλεσμα.
nav a: hover, nav a: ενεργό χρώμα-φόντου: #fff; nav ύψος: 40px; πλάτος: 100%. φόντο: # 000; border-bottom: 2px solid #fff; α χρώμα: #fff; εμφάνιση: inline-block πλάτος: 100px; σκιά κειμένου: 1px 1px 0px # 000; ul padding: 0; περιθώριο: 0 αυτόματο; li: τελευταίο παιδί a border-right: 0; li εμφάνιση: εν σειρά? float: αριστερά. ένα border-right: 1px solid #fff; μέγεθος κιβωτίου: πλαίσιο-πλαίσιο?
Όπως μπορούμε να δούμε παραπάνω, το παλιό μας CSS είναι τώρα ένθετο όπως στο LESS.
Περιορισμός
Ωστόσο, μπορούμε επίσης να δούμε ορισμένους περιορισμούς στα αποτελέσματα της μετατροπής. Στο παλιό CSS, έχουμε πολλά ίδια χρώματα, όπως σε αυτές τις δύο δηλώσεις border-bottom: 2px solid #fff; και border-right: 1px solid #fff; έχουμε και τα δύο σύνορα σε λευκό. Με λιγότερα μπορούμε πραγματικά να αποθηκεύσουμε αυτή τη σταθερή τιμή σε a Μεταβλητός.
Επίσης, δεν φωλιάζει και δεν χωρίζει το ψευδής-* με σύμβολο ampersand (&), όπως στους παρακάτω κανόνες li: τελευταίο παιδί και πλοήγηση: πλοήγηση, πλοήγηση: ενεργός. Παραμένουν ακριβώς όπως είναι, όπου μπορούμε πραγματικά να απλοποιήσουμε τους κανόνες των κανόνων αυτού του τρόπου?
li &: first-child a &: hover &: ενεργό
συμπέρασμα
Παρά τους περιορισμούς που εξακολουθεί να έχει, το εργαλείο αυτό μπορεί να σας βοηθήσει αρκετά για να εξοικονομήσετε χρόνο για την τοποθέτηση των κανόνων κανόνων CSS. Χρειάζεται μόνο να κάνουμε το υπόλοιπο με το χέρι. ενδεχομένως μέχρι τους παραπάνω περιορισμούς επιλυθεί.
