Πολλοί σχεδιαστές χρησιμοποιούν κάποιο είδος προ-επεξεργαστή CSS, είτε αυτό είναι Sass , ΠΙΟ ΛΙΓΟ ή Κονδύλι . Αν έχετε χρησιμοποιήσει κάποιο από αυτά, ίσως γνωρίζετε επίσης ότι η Compass είναι ένα πλαίσιο που βασίζεται στο Sass και παρόλο που η τοποθέτησή του μπορεί να είναι εκτός λειτουργίας, μόλις το χρησιμοποιήσετε, θα ανακαλύψετε γρήγορα ότι είναι ένα από τα καλύτερα web designer μπορεί να μάθει.
Εάν δεν έχετε χρησιμοποιήσει ποτέ το Sass πριν, θα σας συνιστούσα να ρίξετε μια ματιά στα WDD's εισαγωγή στο Sass.
Η πυξίδα λειτουργεί σαν ένα πλαίσιο για το CSS. Όταν εργάζεστε σε ένα μεγάλο έργο, είναι εύκολο τα πράγματα να ξεπεραστούν και συχνά βρίσκοντας τα πράγματα στο δικό σας CSS είναι μια πρόκληση. Η πυξίδα προσπαθεί να αντιμετωπίσει αυτά τα προβλήματα, με το επιπλέον πλεονέκτημα της εργασίας με τα προθέματα προμηθευτών.
Όπως είπα παραπάνω, η Compass είναι ένα πλαίσιο για το CSS που επιλύει μερικά από τα προβλήματα με τη γλώσσα. Περιλαμβάνει επίσης μερικά εργαλεία για την ταχύτερη και ευκολότερη ανάπτυξη:
Όπως το Sass και το λιγότερο, η πυξίδα είναι απλώς ένα εργαλείο που κάνει τον σχεδιασμό του δικτυακού τόπου απλούστερο.
Η πυξίδα είναι ένα Ruby gem, οπότε για να την εγκαταστήσετε πρέπει πρώτα να έχετε εγκατεστημένο το Ruby στο μηχάνημά σας. Ευτυχώς η εγκατάσταση του Ruby είναι απλή, στα Windows πρέπει απλά να το κατεβάσετε Ruby Installer για τα Windows , στο Mac / Linux ακολουθήστε τις οδηγίες στο Ruby site.
Αφού εγκαταστήσετε το Ruby, η εγκατάσταση της πυξίδας είναι τόσο εύκολη:
gem install compassΑυτό θα εγκαταστήσει τόσο την Compass όσο και την Sass.
Αν θέλετε να δημιουργήσετε ένα έργο Compass, πληκτρολογήστε:
compass create /path/to/projectcd /path/to/projectcompass watchΑυτές οι τρεις γραμμές κώδικα σημαίνουν ότι κάθε φορά που αλλάζετε ένα αρχείο Sass αυτοί θα μεταγλωττιστούν αυτόματα σε CSS.
Εναλλακτικά, θα μπορούσατε να χρησιμοποιήσετε Codekit (Mac) ή Πρέπρος (Windows) για να μεταγλωττίσετε το Sass όταν αποθηκευτεί.
Η πυξίδα χωρίζεται σε ενότητες και για να αρχίσει να χρησιμοποιεί τα βοηθητικά προγράμματα της, πρέπει πρώτα να εισαγάγουμε την ενότητα που θέλουμε στο κύριο αρχείο .scss. Για παράδειγμα, για την εισαγωγή της λειτουργικής μονάδας CSS3 θα χρησιμοποιούσαμε:
@import "compass/css3";Τώρα μπορούμε να αρχίσουμε να χρησιμοποιούμε τις βοηθητικές εφαρμογές και τα mixins που προσφέρει η Compass για τις νέες ιδιότητες που συνοδεύουν το CSS3. Το καλύτερο πράγμα για αυτό είναι ότι δεν χρειάζεται να πληκτρολογούμε προθέματα πωλητών ξανά και ξανά, κάτι που ήταν πάντα πρόβλημα όταν ήρθε στο CSS3.
Ακολουθεί ένα παράδειγμα, αν θέλαμε να δημιουργήσουμε μια απλή διάταξη 3 στήλης με υδρορροή 20px, στο CSS θα έπρεπε να πληκτρολογήσουμε:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}Μπορείτε να δείτε πόσο απρόσβλητος κάνει τον κώδικα μας γρήγορα. Με τη βοήθεια της Compass και του Sass το μόνο που χρειάζεται είναι το εξής:
div{@include column-count(3);@include column-gap(20px);}Όπως βλέπετε, έχουμε αφαιρέσει τα προθέματα των πωλητών και αυτό που πήρε 6 γραμμές CSS ολοκληρώσαμε σε μόλις 2.
Ένα άλλο παράδειγμα CSS που απαιτεί πολύ πληκτρολόγηση είναι οι κλίσεις. Δείτε πώς θα γράψαμε μια απλή κλίση λευκού προς μαύρο στο CSS:
.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}Η δημιουργία του ίδιου αποτελέσματος με την Πυξίδα είναι τόσο απλή όσο:
.gradient{@include background-image(linear-gradient(#fff, #000));}Όχι μόνο αυτό μειώνει σημαντικά το ποσό του κώδικα, αλλά αν θέλετε να αλλάξετε τα χρώματα, στην έκδοση Compass πρέπει μόνο να τις αλλάξετε μία φορά.
Υπάρχει πλήρης λίστα με το συντομεύσει τις ιδιότητες CSS3 εδώ.
Η πυξίδα περιλαμβάνει επίσης κάποιους βοηθούς για συνδέσμους, ένας από τους οποίους είναι ένας πραγματικός εξοικονόμηση χρόνου. Πρώτον, πρέπει να συμπεριλάβουμε το τυπογραφικό μοντέλο ως την αρχή του κύριου αρχείου Sass:
@import "compass/typography"Η ενότητα τυπογραφίας έχει μεγάλη στενογραφία για χρώματα στυλ, όπως έτσι:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Αυτό είναι το καλύτερο πράγμα για την πυξίδα. παίρνει τον κώδικα που χρησιμοποιούμε σε καθημερινή βάση και μας δίνει σύντομες εκδόσεις.
Αυτό το άρθρο ήταν απλώς μια γρήγορη εισαγωγή στην Compass, αλλά αν βρεθεί το θέμα τόσο συναρπαστικό όσο εγώ, θα ήθελα να σας συμβουλέψω να ελέγξτε την ιστοσελίδα τους και να εξερευνήσετε περισσότερες από τις βοηθητικές εφαρμογές που είναι διαθέσιμες.
Ελπίζω να εξετάσετε τώρα τη χρήση της Compass και της Sass στα έργα σας, επειδή είναι πραγματικά απίστευτες προσθήκες στην εργαλειοθήκη του web designer.
Χρησιμοποιείτε την Πυξίδα ή το Sass; Προτιμάτε διαφορετικό προ-επεξεργαστή; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα πυξίδας μέσω Shutterstock.