Συντακτικά Φοβιές Φύλλα Στυλ Χρησιμοποιώντας Πυξίδα στο Sass

Στην τελευταία μας ανάρτηση αναφέραμε μία φορά για την πυξίδα. Σύμφωνα με τον επίσημο ιστότοπο, περιγράφεται ως ένα CSS Authoring Framework ανοικτού κώδικα.

Εν ολίγοις, η Compass είναι μια επέκταση Sass και, όπως και το λιγότερο στοιχείο του LESS, έχει ένα σωρό έτοιμο CSS3 Mixins, εκτός από το γεγονός ότι έχει προσθέσει και πολλά άλλα πράγματα που το καθιστούν ένα πιο ισχυρό εργαλείο σύνθεσης για τον Sass. Ας το ελέγξουμε.

Εγκατάσταση πυξίδας

Πυξίδα, όπως και ο Sass, πρέπει να εγκατασταθεί στο σύστημά μας. Ωστόσο, αν χρησιμοποιείτε μια εφαρμογή όπως το Scout App ή το Compass.app, αυτό δεν θα είναι απαραίτητο.

Χωρίς αυτούς, πρέπει να το κάνετε “χειροκίνητα” διά μέσου Τερματικό / Γραμμή εντολών. Για να το κάνετε αυτό, πληκτρολογήστε την ακόλουθη γραμμή εντολών.

Σε Mac / Linux Terminal

 sudo gem εγκατάσταση πυξίδας 

Στη γραμμή εντολών των Windows

 gem εγκατάσταση πυξίδα 

Εάν η εγκατάσταση επιτύχει, θα πρέπει να λάβετε μια ειδοποίηση όπως φαίνεται παρακάτω.

Στη συνέχεια, εκτελέστε την ακόλουθη γραμμή εντολών στον κατάλογο εργασίας που θέλετε να προσθέσετε Αρχεία έργου πυξίδας.

 πυξίδα init 

Περαιτέρω ανάγνωση: Τεκμηρίωση γραμμής εντολών πυξίδας

Ρύθμιση πυξίδας

Εάν έχετε εκτελέσει αυτήν την εντολή πυξίδα init, θα πρέπει τώρα να έχετε ένα αρχείο που ονομάζεται config.rb στον κατάλογο εργασίας σας. Αυτό το αρχείο χρησιμοποιείται για τη διαμόρφωση της εξόδου έργου. Για παράδειγμα, μπορούμε να αλλάξουμε τα προτιμώμενα ονόματα καταλόγων.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Απογυμνώστε τη γραμμή σχολίων που δημιουργείται από την Πυξίδα. θέσαμε αληθής αν χρειαζόμαστε τα σχόλια προς εκτύπωση ή ψευδής αν δεν χρειάζεται.

 line_comments = ψευδής 

Μπορούμε επίσης να αποφασίσουμε την έξοδο CSS. Υπάρχουν τέσσερις επιλογές που μπορούμε να επιλέξουμε :αναπτυγμένος, :συμπαγής, : συμπιεσμένοκαι : ένθετα. Προς το παρόν, χρειαζόμαστε μόνο να επεκταθεί καθώς βρισκόμαστε ακόμη στο στάδιο της ανάπτυξης.

 output_style =: επέκταση 

Νομίζω ότι αυτές οι διαμορφώσεις θα επαρκέσουν για τα περισσότερα έργα γενικά, αλλά μπορείτε πάντα να ανατρέξετε σε αυτήν την τεκμηρίωση, την αναφορά Compass Configuration Reference εάν χρειάζεστε περισσότερες προτιμήσεις.

Τέλος, πρέπει να το κάνουμε ρολόι κάθε αρχείο στον κατάλογο με αυτήν τη γραμμή εντολών.

 ρολόι πυξίδας 

Αυτή η γραμμή εντολών, όπως και στο Sass, θα παρακολουθεί κάθε αλλαγή αρχείου και θα δημιουργήσει ή θα ενημερώσει τα αντίστοιχα αρχεία CSS. Αλλά θυμηθείτε, εκτελέστε αυτή τη γραμμή αφού ολοκληρώσετε τη διαμόρφωση του έργου config.rb, ή αλλιώς απλώς θα αγνοήσει τις αλλαγές στο αρχείο.

CSS3 Mixins

Πριν περπατήσετε μέσα από το CSS3, στο πρωτεύον μας .scss αρχείο, πρέπει να εισάγουμε την πυξίδα με την ακόλουθη γραμμή @import "πυξίδα"?, αυτό θα εισαγάγει όλες τις επεκτάσεις στην Πυξίδα. Αλλά, αν χρειαζόμαστε μόνο CSS3, μπορούμε να το κάνουμε πιο συγκεκριμένα με αυτή τη γραμμή @import "πυξίδα / css3".

Περαιτέρω ανάγνωση: Πυξίδα CSS3.

Τώρα, ας αρχίσουμε να δημιουργούμε κάτι με το Saas και την Compass. Στο έγγραφο HTML, υποθέτοντας ότι έχετε δημιουργήσει επίσης ένα, θα βάλουμε την ακόλουθη απλή σήμανση:

Η ιδέα είναι επίσης απλή. θα δημιουργήσουμε ένα περιστρεφόμενο κιβώτιο με στρογγυλεμένες γωνίες, και κάτω από αυτά είναι τα ένθετα Sass για τον εκκινητή.

 σώμα χρώμα-φόντου: # f3f3f3;  τμήμα width: 500px; περιθώριο: 50px αυτόματο 0; div πλάτος: 250px; ύψος: 250px; χρώμα φόντου: #ccc; περιθώριο: 0 αυτόματο;  

Και, για να πάρουμε το ορθογώνιο μας τις στρογγυλεμένες γωνίες, μπορούμε να συμπεριλάβουμε τα Compass CSS3 Mixins ως εξής:

 σώμα χρώμα-φόντου: # f3f3f3;  τμήμα width: 500px; περιθώριο: 50px αυτόματο 0; div πλάτος: 250px; ύψος: 250px; χρώμα φόντου: #ccc; περιθώριο: 0 αυτόματο; @περιλαμβάνει ακτίνα ακτίνων.  

Αυτό ακτίνα ακρόασης Τα Mixins θα παράγουν όλα τα προθέματα του προγράμματος περιήγησης και, από προεπιλογή, η ακτίνα γωνίας θα είναι 5px. Αλλά, μπορούμε επίσης να καθορίσουμε την ακτίνα στην ανάγκη μας με αυτόν τον τρόπο @ περιλαμβάνει την ακτίνα ακρών (10px). .

 τμήμα div πλάτος: 250px; ύψος: 250px; χρώμα φόντου: #ccc; περιθώριο: 0 αυτόματο; -webkit-ακτίνα-ακτίνα: 10px; -moz-border-radius: 10px; -ms-ακτίνα-ακτίνα: 10px; -ο-περιθώριο-ακτίνα: 10px; ακτίνα-ακτίνα: 10px;  

Στη συνέχεια, καθώς το σχέδιο θα περιστρέψουμε επίσης το κουτί. Είναι πολύ εύκολο να το κάνουμε με την Compass, το μόνο που χρειάζεται να κάνουμε είναι να καλέσουμε τη μέθοδο μετασχηματισμού, όπως έτσι.

 σώμα χρώμα-φόντου: # f3f3f3;  τμήμα width: 500px; περιθώριο: 50px αυτόματο 0; div πλάτος: 250px; ύψος: 250px; χρώμα φόντου: #ccc; περιθώριο: 0 αυτόματο; @ περιλαμβάνει την ακτίνα ακρών (10px). @ include περιστρέψτε;  

Αυτά τα Mixins θα δημιουργήσουν επίσης αυτά τα κουραστικά προθέματα πωλητών και η περιστροφή θα πάρει 45 μοίρες από προεπιλογή. Δείτε το παραγόμενο CSS παρακάτω.

 τμήμα div πλάτος: 250px; ύψος: 250px; χρώμα φόντου: #ccc; περιθώριο: 0 αυτόματο; -webkit-ακτίνα-ακτίνα: 10px; -moz-border-radius: 10px; -ms-ακτίνα-ακτίνα: 10px; -ο-περιθώριο-ακτίνα: 10px; ακτίνα-ακτίνα: 10px; -webkit-transform: περιστρέψτε (45deg); -moz-transform: περιστρέψτε (45deg); -ms-μετασχηματισμός: περιστροφή (45deg); -o-μετασχηματισμός: περιστροφή (45deg); μετασχηματισμός: περιστροφή (45deg);  

Βοηθοί πυξίδας

Ένα από τα πιο δυνατά χαρακτηριστικά της Compass είναι οι Βοηθοί. Σύμφωνα με την επίσημη ιστοσελίδα, Οι βοηθοί της πυξίδας είναι λειτουργίες που αυξάνουν τις λειτουργίες που παρέχει η Sass. Εντάξει, ας ρίξουμε μια ματιά στα ακόλουθα παραδείγματα για να πάρετε μια σαφή εικόνα.

Προσθήκη αρχείων @ γραμματοσειράς

Σε αυτό το παράδειγμα, θα προσθέσουμε προσαρμοσμένη οικογένεια γραμματοσειρών με @ font-face κανόνας. Σε απλό CSS3, ο κώδικας μπορεί να μοιάζει με κάτι τέτοιο παρακάτω, που αποτελείται από τέσσερις διαφορετικούς τύπους γραμματοσειρών και είναι επίσης δύσκολο να θυμηθούμε για μερικούς ανθρώπους.

 @ γραμματοσειρά font-family: "MyFont"; μορφότυπος src: url ('/ fonts / font.ttf') μορφή ('truetype'), μορφή url ('/ fonts / font.otf'), μορφή url ('/ fonts / font.woff' ('woff'), μορφή url ('/ fonts / font.eot') ('embedded-opentype').  

Με την πυξίδα μπορούμε να κάνουμε το ίδιο πιο εύκολα με αρχεία γραμματοσειράς () Βοηθοί;

 @include font-face ("MyFont", γραμματοσειρά-αρχεία ("font.ttf", "font.otf", "font.woff", "font.eot")). 

Ο παραπάνω κώδικας θα δημιουργήσει ένα αποτέλεσμα που είναι ακριβώς το ίδιο με το πρώτο απόσπασμα κώδικα, θα εντοπίσει επίσης αυτόματα τον τύπο γραμματοσειράς και θα το προσθέσει στο μορφή() σύνταξη.

Ωστόσο, αν εξετάσουμε προσεκτικά τον κώδικα, θα δείτε ότι δεν προσθέσαμε τη διαδρομή της γραμματοσειράς (/ fonts /). Έτσι, πώς γνώριζε η Compass πού βρίσκονται οι γραμματοσειρές; Λοιπόν, μην συγχέεται, αυτή η πορεία προέρχεται στην πραγματικότητα config.rb με path_paths ιδιοκτησία;

 fonts_dir = "γραμματοσειρές" 

Λοιπόν, ας πούμε ότι το αλλάζουμε fonts_dir = "myfonts", τότε ο δημιουργούμενος κώδικας θα είναι url ('/ myfonts / font.ttf'). Από προεπιλογή, όταν δεν καθορίζουμε τη διαδρομή, η Compass θα την κατευθύνει stylesheets / γραμματοσειρές.

Προσθήκη εικόνας

Ας δημιουργήσουμε ένα άλλο παράδειγμα, αυτή τη φορά θα προσθέσουμε μια εικόνα. Η προσθήκη εικόνων μέσω του CSS είναι ένα κοινό πράγμα. Κάνουμε γενικά αυτό χρησιμοποιώντας το εικόνα φόντου ιδιοκτησία, όπως έτσι?

 div φόντο-εικόνα: url ('/ img / the-image.png');  

Στην Πυξίδα, αντί να χρησιμοποιήσετε το url () λειτουργία, μπορούμε να την αντικαταστήσουμε image-url () Βοηθοί και παρόμοια με την προσθήκη @ font-face παραπάνω, μπορούμε να αγνοήσουμε εντελώς τη διαδρομή και να αφήσουμε την Compass να χειριστεί τα υπόλοιπα.

Αυτός ο κώδικας θα δημιουργήσει επίσης την ίδια ακριβώς δήλωση CSS με το πρώτο απόσπασμα.

 div φόντο-εικόνα: image-url (the-image.png);  

Επιπλέον, η Compass έχει επίσης Βοηθητικά στοιχεία διάστασης εικόνας, ανιχνεύει κυρίως το πλάτος και το ύψος της εικόνας, οπότε σε περίπτωση που χρειαζόμαστε και τα δύο να προσδιοριστούν στο CSS μπορούμε να προσθέσουμε δύο επιπλέον γραμμές ως εξής:

 div φόντο-εικόνα: image-url ("images.png"); πλάτος: πλάτος εικόνας ("images.png"); ύψος: ύψος εικόνας ("images.png");  

Η παραγωγή θα γίνει κάτι τέτοιο.

 div φόντο-εικόνα: url ('/ img / images.png; 1344774650'); πλάτος: 80px; ύψος: 80px;  

Περαιτέρω ανάγνωση: Λειτουργίες βοηθού πυξίδας

Τελική σκέψη

Εντάξει, έχουμε συζητήσει αρκετά για την Compass σήμερα και όπως μπορείτε να δείτε είναι πραγματικά ένα ισχυρό εργαλείο και ας γράψουμε το CSS με πιο κομψό τρόπο.

Και, όπως ήδη γνωρίζατε, ο Sass δεν είναι ο μόνος Προεπεξεργαστής CSS. υπάρχει επίσης και λιγότερο που συζητήσαμε προηγουμένως προηγουμένως. Στην επόμενη ανάρτηση, θα προσπαθήσουμε να συγκρίνουμε, από το κεφάλι με το κεφάλι, ποιο από τα δύο κάνει την εργασία καλύτερα στην προεπεξεργασία του CSS.

• Λήψη πηγής