Προεπεξεργαστές CSS σε σύγκριση με το Sass και λιγότερο
Υπάρχουν αρκετοί CSS Preprocessor, LESS, Sass, Stylus και Swith CSS, για να αναφέρουμε μερικά. Προεπεξεργαστής CSS, όπως είπαμε συχνά πριν, αποσκοπεί πρωτίστως να καταστήσει τη συγγραφική CSS πιο δυναμική, οργανωμένη και παραγωγική. Αλλά, το ερώτημα είναι ποιο από αυτά κάνει τη δουλειά του καλύτερα?
Λοιπόν, φυσικά, δεν θα ρίξουμε μια ματιά σε κάθε ένα από αυτά, αντ 'αυτού, θα συγκρίνουμε μόνο δύο από τα πιο δημοφιλή: Sass και λιγότερο. Για να αποφασίσουμε, θα συγκρίνουμε τα δύο σε επτά παράγοντες: αυτός που εκτελεί καλύτερα παίρνει ένα σημείο. σε περίπτωση ισοπαλίας, και οι δύο θα λάβουν ένα βαθμό.
Ας ξεκινήσουμε.
Εγκατάσταση
Ας ξεκινήσουμε με το πολύ θεμελιώδες βήμα, Εγκατάσταση. Τόσο το Sass όσο και το LESS είναι χτισμένα σε διαφορετική πλατφόρμα, ο Sass τρέχει σε Ruby, ενώ λιγότερο είναι μια βιβλιοθήκη JavaScript (που το ήταν στην πραγματικότητα επίσης χτισμένο σε Ruby αρχικά).
Sass: Το Sass χρειάζεται Ruby για να λειτουργήσει, στο Mac αυτό έχει προεγκατασταθεί, αλλά στα Windows ίσως χρειαστεί να το εγκαταστήσετε πριν αρχίσετε να παίζετε με τον Sass. Επιπλέον, το Sass πρέπει να εγκατασταθεί μέσω του τερματικού ή της γραμμής εντολών. Υπάρχουν πολλές εφαρμογές GUI που μπορείτε να χρησιμοποιήσετε στη θέση τους, αλλά δεν είναι δωρεάν.
ΠΙΟ ΛΙΓΟ: Το LESS βασίζεται στο JavaScript, οπότε το intalling less είναι τόσο εύκολο όσο η σύνδεση της βιβλιοθήκης JavaScript στο έγγραφο HTML. Υπάρχουν επίσης μερικές εφαρμογές GUI που βοηθούν στη σύνταξη του LESS στο CSS και οι περισσότεροι από αυτούς είναι ελεύθεροι και εκτελούν πολύ καλά (π.χ. WinLess και LESS.app).
συμπέρασμα: Μειονεκτήματα είναι σαφώς στο προσκήνιο.
Επεκτάσεις
Τόσο το Sass όσο και το λιγότερο διαθέτουν επεκτάσεις για ταχύτερη και ευκολότερη ανάπτυξη ιστού.
Sass: Στην τελευταία μας ανάρτηση, συζητήσαμε για την Compass, την τρέχουσα και δημοφιλή επέκταση της Sass. Η πυξίδα έχει αρκετούς Mixins για να γράψει τη σύνταξη CSS3 σε λιγότερο χρόνο.
Όμως, η Compass είναι πέρα από τα CSS3 Mixins, αλλά έχει προσθέσει και άλλες πολύ χρήσιμες λειτουργίες όπως Βοηθοί, Διάταξη, Τυπογραφία, Διάταξη πλέγματος και ακόμη και εικόνες Sprite. Εχει επίσης config.rb αρχείο όπου μπορούμε να ελέγξουμε την έξοδο CSS και κάποιες άλλες προτιμήσεις. Έτσι, με λίγα λόγια, η Compass είναι ένα πακέτο all-in-one για να κάνει την ανάπτυξη ιστού με τον Sass.
ΠΙΟ ΛΙΓΟ: ΛΙΓΟ έχει επίσης αρκετές επεκτάσεις, αλλά σε αντίθεση με την Compass που έχει όλα όσα χρειαζόμαστε σε ένα μέρος, είναι χωρισμένα και καθένα από αυτά είναι χτισμένο από διαφορετικούς προγραμματιστές. Αυτό δεν θα είναι πρόβλημα για έμπειρους χρήστες, αλλά για όσους μόλις ξεκινούν με λιγότερο, πρέπει να πάρουν κάποιο χρόνο για να επιλέξουν τις σωστές επεκτάσεις που ταιριάζουν στη ροή εργασίας τους.
Ακολουθούν μερικές Λιγότερες επεκτάσεις που ίσως χρειαστεί να συμπεριλάβετε στο έργο σας:
- CSS3 Mixins: ΛΕΠΤΑ Στοιχεία, Preboot, LESS Mixins.
- Πλέγμα: 960.gs, Frameless, Semantic.gs
- Σχέδιο: Ακόμα λιγότερο
- Διάφορα: Bootstrap του Twitter
συμπέρασμα: Νομίζω ότι πρέπει να συμφωνήσουμε ότι το Sass και η Compass είναι ένα σπουδαίο δίδυμο και το χαρακτηριστικό γνώρισμα Sprite είναι πραγματικά kickass, έτσι ένα σημείο για τον Sass εδώ.
Γλώσσες
Κάθε Προεπεξεργαστής CSS έχει τη δική του γλώσσα και είναι ως επί το πλείστον κοινό. Για παράδειγμα, τόσο το Sass όσο και το LESS έχουν μεταβλητές, αλλά δεν υπάρχει σημαντική διαφορά σε αυτό, εκτός από το Sass ορίζει τις μεταβλητές με ένα $ σημάδι ενώ το λιγότερο το κάνει με ένα @ σημάδι. Εξακολουθούν να κάνουν το ίδιο πράγμα: αποθηκεύστε μια σταθερή τιμή.
Παρακάτω θα εξετάσουμε κάποιες από τις πιο συχνά χρησιμοποιούμενες γλώσσες τόσο στο Sass όσο και στο LESS (με βάση την εμπειρία μου).
Φωτισμός
Ο κανόνας "hooding" είναι μια καλή πρακτική για να αποφύγετε την επανειλημμένη γραφή επιλογών και τόσο το Sass όσο και το LESS έχουν τον ίδιο τρόπο στους κανόνες φωλιάσματος.
Sass / Scss και λιγότερο
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; ul padding: 0; περιθώριο: 0;
Αλλά το Sass / Scss παίρνει αυτή τη μέθοδο ένα βήμα παραπέρα επιτρέποντάς μας να φωλιάζουμε και μεμονωμένες ιδιότητες, εδώ είναι ένα παράδειγμα:
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; ul padding: 0; περιθώριο: 0; όριο: style: solid; αριστερά: width: 4px; χρώμα: # 333333; δεξιά: width: 2px; χρώμα: # 000000;
Αυτός ο κώδικας θα παράγει την ακόλουθη έξοδο.
nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; μεθοδικό στυλ: συμπαγές; όριο-αριστερά-πλάτος: 4px; border-left-color: # 333333; όριο-δεξιά-πλάτος: 2px; border-right-color: # 000000; nav ul padding: 0; περιθώριο: 0;
συμπέρασμα: Η τοποθέτηση ατομικών ιδιοτήτων είναι μια ωραία προσθήκη και θεωρείται η καλύτερη εξάσκηση, ειδικά αν ακολουθήσουμε την αρχή DRY (Do not Repeat Yourself). Επομένως, νομίζω ότι είναι σαφές ποιος κάνει καλύτερα σε αυτή την περίπτωση.
Mixins και Selector Κληρονομικότητα
Τα μίγματα σε Sass και λιγότερο ορίζονται λίγο διαφορετικά. Στο Sass χρησιμοποιούμε το@ mixin οδηγίας, ενώ σε λιγότερο το καθορίζουμε με τον επιλογέα κλάσης. Ακολουθεί ένα παράδειγμα:
Sass / Scss
@mixin border-radius (τιμές $) border-radius: $ values; nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; @ περιλαμβάνει την ακτίνα ακρών (10px).
ΠΙΟ ΛΙΓΟ
.σύνορα (@radius) ακτίνα-ακτίνα: @radius; nav περιθώριο: 50px αυτόματο 0; πλάτος: 788px; ύψος: 45px; .border (10px);
Mixins, στο Sass και λιγότερο, χρησιμοποιείται για να περιλαμβάνω ιδιότητες από ένα σύνολο κανόνων σε ένα άλλο σύνολο κανόνων. Στο Sass, η μέθοδος αυτή λαμβάνεται περαιτέρω με Επιλογή κληρονομίας. Η ιδέα είναι πανομοιότυπη, αλλά αντί να αντιγράψει ολόκληρες τις ιδιότητες, η Sass θα επεκτείνει ή θα ομαδοποιήσει επιλογείς που έχουν τις ίδιες ιδιότητες και τιμές χρησιμοποιώντας το @επεκτείνω διευθυντικός.
Ρίξτε μια ματιά σε αυτό το παρακάτω παράδειγμα:
.κύκλος border: 1px solid #ccc; ακτίνα ακτίνων: 50px; υπερχείλιση: κρυφή; .avatar @extend .circle;
Αυτός ο κώδικας θα έχει ως αποτέλεσμα.
.κύκλος, .avatar border: 1px solid #ccc; ακτίνα ακτίνων: 50px; υπερχείλιση: κρυφή;
συμπέρασμα: Το Sass είναι ένα βήμα μπροστά από τις διακριτές Mixins και Selectors Heritage.
Λειτουργίες
Τόσο το Sass όσο και το λιγότερο μπορούν να κάνουν βασικές μαθηματικές εργασίες, αλλά μερικές φορές επιστρέφουν διαφορετικά αποτελέσματα. Δείτε πώς εκτελούν αυτόν τον τυχαίο υπολογισμό:
Sass / Scss
$ margin: 10px; div περιθώριο: $ margin - 10%; / * Σφάλμα σύνταξης: Μη συμβατές μονάδες: '%' και 'px' * /
ΠΙΟ ΛΙΓΟ
@margin: 10px; div περιθώριο: @margin - 10%; / * = 0px * /
συμπέρασμα: Sass, σε αυτή την περίπτωση, το κάνει με περισσότερη ακρίβεια. καθώς τα% και τα px δεν είναι ισοδύναμα, θα πρέπει να επιστρέψει ένα σφάλμα. Αν και, ελπίζω πραγματικά ότι μπορεί να είναι κάτι σαν 10px - 10% = 9px.
Ειδοποιήσεις σφάλματος
Η ειδοποίηση σφάλματος είναι σημαντική για να δείτε τι κάνουμε λάθος. Φανταστείτε χιλιάδες γραμμές κώδικα και ένα μικρό κομμάτι σφάλματος κάπου στο χάος. Ένα σαφές ειδοποίηση σφάλματος θα είναι ο καλύτερος τρόπος για να καταλάβετε γρήγορα το πρόβλημα.
Sass: Σε αυτό το παράδειγμα, χρησιμοποιώ απλά τη γραμμή εντολών για να εκτελέσω τον μεταγλωττιστή. Το Sass θα δημιουργήσει μια ειδοποίηση σφάλματος κάθε φορά που υπάρχει κωδικός αναπηρίας. Σε αυτή την περίπτωση θα αφαιρέσουμε ένα ερωτηματικό στη γραμμή 6, και αυτό θα πρέπει να μετατραπεί σε σφάλμα. Ρίξτε μια ματιά στο παρακάτω στιγμιότυπο οθόνης.
Όταν πρωτογνώρισα αυτήν την ειδοποίηση, δεν θα μπορούσα να το καταλάβω. Επίσης, φαίνεται Sass είναι ελαφρώς μακριά με το σημείο όπου το λάθος είναι. Είπε ότι το λάθος είναι γραμμή 7, αντί 6.
ΠΙΟ ΛΙΓΟ: Με το ίδιο σενάριο σφάλματος, η ειδοποίηση ΜΑΙΟΣ παρουσιάζεται καλύτερα και φαίνεται επίσης πιο ακριβής. Ρίξτε μια ματιά σε αυτό το στιγμιότυπο οθόνης:
Συμπέρασμα: ΜΗΝ προσφέρει καλύτερη εμπειρία σε αυτό το θέμα και κερδίζει τα χέρια κάτω.
Απόδειξη με έγγραφα
Η τεκμηρίωση είναι πολύ σημαντικό μέρος για κάθε προϊόν. ακόμη και οι έμπειροι προγραμματιστές θα δυσκολευτούν να κάνουν τα πράγματα χωρίς Απόδειξη με έγγραφα.
Sass: Αν εξετάσουμε την τεκμηρίωση στο επίσημο site, προσωπικά, αισθάνομαι σαν να είμαι στη μέση μιας βιβλιοθήκης, η τεκμηρίωση είναι πολύ ολοκληρωμένη. Ωστόσο, το βλέμμα και η αίσθηση, αν αυτό έχει σημασία για εσάς, δεν είναι κίνητρο για την ανάγνωση, καθώς και το φόντο είναι απλά λευκό.
Η παρουσίαση μοιάζει περισσότερο με την τεκμηρίωση W3 ή το WikiPedia. Δεν ξέρω αν αυτό είναι το πρότυπο προβολής τεκμηρίωσης στο Διαδίκτυο, αλλά δεν είναι ο μόνος τρόπος.
ΠΙΟ ΛΙΓΟ: Από την άλλη πλευρά, η τεκμηρίωση ΜΑΙΟΣ είναι σαφέστερη χωρίς πάρα πολλές εξηγήσεις κειμένου, και καταδύεται κατευθείαν στα παραδείγματα. Έχει επίσης καλή τυπογραφία και ένα καλύτερο συνδυασμό χρωμάτων. Νομίζω ότι αυτός ήταν ο λόγος για τον οποίο ΔΕΝ προσελκύσει λιγότερο την προσοχή μου και μπορώ να το μάθω ταχύτερα λόγω της διάταξης και της παρουσίασης της τεκμηρίωσης.
συμπέρασμα: Η παρουσίαση λιγότερων εγγράφων είναι καλύτερη, αν και η Sass έχει πιο ολοκληρωμένη τεκμηρίωση, οπότε νομίζω ότι μπορούμε να την ονομάσουμε ως ισοπαλία.
Τελική σκέψη
Νομίζω ότι αυτό είναι ένα σαφές συμπέρασμα Ο Sass είναι καλύτερος με συνολικό σκορ 5 έναντι 3 για λιγότερα. Εντούτοις, αυτό δεν σημαίνει ότι το λιγότερο είναι κακό. Απλά πρέπει να είναι καλύτερα. Στο τέλος, εναπόκειται στην τελική απόφαση του χρήστη να επιλέξει τον προεπεξεργαστή της επιλογής του. Είτε Sass ή λιγότερο, εφ 'όσον είναι άνετα και πιο παραγωγικά, τότε αυτός είναι ο νικητής στη λίστα τους.
Τέλος, εάν έχετε κατά νου κάτι σχετικά με αυτό το θέμα, μπορείτε να το μοιραστείτε στο παρακάτω πλαίσιο σχολίων.
