Sass Tutorial Οικοδόμηση μιας ηλεκτρονικής κάρτας vCard με Sass & Compass

 
 
  
 
 
Τόρικ Φιρνταού
 
[email protected]
 
(+62) 1.2345.678.9
 
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Δοκιμάστε το δοχείο, βγάλτε το σε σφαιρίδια, βάλτε το πιάτο. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Κελάδημα
 
Google+
 
Αποσπάστε
 
 
 
 

Όπως βλέπετε παραπάνω, οι κοινωνικές ταυτότητες που περιλαμβάνονται στις "κοινωνικές"Το τμήμα είναι δομημένο σε στοιχεία καταλόγου, ώστε να τα προβάλλουμε εύκολα δίπλα. Σε κάθε ένα από αυτά δίνεται ένα όνομα κλάσης σύμφωνα με αυτήν τη σύμβαση social-facebook, social-twitter, κοινωνικό-google και ούτω καθεξής.

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

Πρέπει να ρυθμίσουμε το Compass λίγο, αποσύροντας μερικές γραμμές μέσα config.rb αρχείου, ως εξής:

 # Μπορείτε να επιλέξετε το προτιμώμενο στυλ εξόδου εδώ (μπορεί να παρακαμφθεί μέσω της γραμμής εντολών): output_style =: expanded # Για να ενεργοποιήσετε τις σχετικές διαδρομές στα στοιχεία μέσω βοηθητικών λειτουργιών πυξίδας. Αποσύνδεση: relative_assets = true # Για να απενεργοποιήσετε τα σχόλια αποσφαλμάτωσης που εμφανίζουν την αρχική θέση των επιλογέων σας. Αποσύνδεση: line_comments = ψευδής 

Εάν δεν μπορείτε να βρείτε config.rb αρχείο, πιθανώς δεν έχετε εκτελέσει αυτήν την εντολή πυξίδα init στον κατάλογο του έργου σας.

Εισαγωγή αρχείων

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

 @import "πυξίδα"? 

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

 @import "πυξίδα / επαναφορά"; 

Ωστόσο, προτιμώ να χρησιμοποιώ Normalize ότι ευτυχώς έρχεται επίσης σε μορφή Sass / Scss. Κάντε λήψη του αρχείου εδώ, αποθηκεύστε το sass και να το εισαγάγετε στο φύλλο στυλ.

 @import "κανονικοποίηση"; 

Συνιστώμενη ανάγνωση: Ανασκόπηση του επιπέδου προτεραιότητας του στυλ CSS

Μεταβλητές

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

 $ base: #fff; $ σκούρο: σκούρο ($ βάσης, 10%); 

Ενώ το $ width μεταβλητή παρακάτω θα είναι το πλάτος της σελίδας μας. θα είναι επίσης η βάση για τον καθορισμό άλλων μεγεθών στοιχείων.

 $ πλάτος: 500px; $ space: $ width / 25; // = 20px 

Και το $ space η μεταβλητή, όπως μπορείτε να δείτε, θα είναι η προεπιλεγμένη απόσταση ή το μέγεθος της στήλης στη vCard μας, που σε αυτό το παράδειγμα θα ήταν 20px.

Η πυξίδα έχει επίσης Βοηθοί για να ανιχνεύσει το μέγεθος της εικόνας και θα χρησιμοποιήσουμε αυτό το χαρακτηριστικό στο προφίλ εικόνας μας, ως εξής:

 $ img: πλάτος εικόνας ("me.jpg") + ((χώρος / 4) * 2); 

Το επιπλέον Πρόσθεση του (($ χώρος / 4) * 2) στον παραπάνω κώδικα, είναι να υπολογίσετε το συνολικό πλάτος εικόνας συμπεριλαμβανομένου του περιγράμματος που θα πλαισιώνει την εικόνα. Ένα πλαίσιο έχει γενικά δύο πλευρές. πάνω και κάτω / αριστερά και δεξιά, γι 'αυτό πολλαπλασιάζουμε το αποτέλεσμα διαίρεσης με 2.

Επιλογή κληρονομίας

Υπάρχουν προφανώς μερικοί επιλογείς στο φύλλο στυλ που θα έχουν τους ίδιους κανόνες στυλ. Για να αποφύγουμε την επανάληψη στον κώδικα μας, θα χρειαστεί να καθορίσουμε πρώτα αυτά τα στυλ και να τα κληρονομήσουμε με το @επεκτείνω οδηγίας όποτε χρειάζεται. Αυτή η μέθοδος, στο Sass, είναι γνωστή ως Επιλογή κληρονομίας, ένα πολύ χρήσιμο χαρακτηριστικό που λείπει από το LESS.

 .float-αριστερά float: left? . μεγέθους κιβωτίων @περιλαμβάνει το μέγεθος του κουτιού (πλαίσιο-πλαισίου).  

Στυλ

Όταν έχει ρυθμιστεί το μόνο που είναι απαραίτητο, τότε είναι καιρός να στυλίσουμε τη vCard, ξεκινώντας με ένα χρώμα φόντου στο έγγραφο HTML.

 html ύψος: 100%; φόντο-χρώμα: $ βάση;  

vCard

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

 .vcard πλάτος: $ πλάτος; Περιθώριο: 50px αυτόματα. φόντο-χρώμα: σκούρο ($ βάσης, 5%); σύνορα: 1px στερεό $ σκούρο? @ περιλαμβάνει ακτίνα ακτίνων (3px). ul padding: 0; περιθώριο: 0; li στυλ λίστας: κανένας;  

Το πλάτος του περιτυλίγματος κληρονομεί την τιμή από $ width μεταβλητός. Το χρώμα φόντου είναι πιο σκούρο από 5% από το βασικό χρώμα, ενώ το χρώμα του περιγράμματος θα είναι πιο σκούρο από 10%. Αυτός ο χρωματισμός επιτυγχάνεται χρησιμοποιώντας λειτουργίες χρώματος Sass.

Η vCard θα έχει επίσης 3px ακτίνα στρογγυλεμένων γωνιών που επιτυγχάνεται με την χρήση Compass CSS3 Mixins. ακτίνα ακτίνας (3px).

Τμήμα Βιολογίας

Όπως έχουμε παρατηρήσει νωρίς σε αυτό το σεμινάριο, το vCard μπορεί να χωριστεί σε δύο ενότητες. Αυτά τα ένθετα στυλ παρακάτω θα ορίζουν την πρώτη ενότητα που περιέχει το προφίλ εικόνας με μερικές λεπτομέρειες (όνομα, email και τηλέφωνο).

 .bio σύνορα-κάτω: 1px στερεό $ σκούρο? padding: $ space; @extend .box-size; img @extend .float-left; εμφάνιση: μπλοκ? σύνορα: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-size; χρώμα: σκούρο ($ βάσης, 50%); περιθώριο: αριστερά: $ space; κάτω: $ space / 2;  πλάτος: $ πλάτος - (($ χώρος * 3) + $ img); li &: πριν από το width: $ space; ύψος: $ space; margin-right: $ space; γραμματοσειρά-οικογένεια: "ModernPictogramsNormal";  & .name: πριν από περιεχόμενο: "f";  & .email: πριν από το content: "m";  & .phone: πριν από περιεχόμενο: "N";  

Υπάρχει ένα πράγμα από τον παραπάνω κώδικα που πιστεύουμε ότι πρέπει να λάβετε ειδοποίηση. Το πλάτος στο .λεπτομέρεια επιλογέας καθορίζεται με αυτήν την εξίσωση $ πλάτος - (($ χώρος * 3) + $ img);.

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

Κοινωνικό Τμήμα

Τα παρακάτω στυλ αφορούν το δεύτερο τμήμα της κάρτας vCard. Δεν υπάρχει ουσιαστικά καμία διαφορά με το απλό CSS εδώ, μόνο τώρα που είναι ένθετα και μερικές μεταβλητές ορίζονται μερικές τιμές.

 .κοινωνικό φόντο-χρώμα: $ σκούρο? πλάτος: 100%. padding: $ space; @extend .box-size; ul κείμενο-ευθυγράμμιση: κέντρο; li εμφάνιση: inline-block; πλάτος: 32px; ύψος: 32px; ένα κείμενο-διακόσμηση: κανένα? εμφάνιση: inline-block πλάτος: 100%. ύψος: 100%. κείμενο-παύλα: 100%; λευκό-διάστημα: τώρα; υπερχείλιση: κρυφή;  

Σε αυτήν την ενότητα θα εμφανίσουμε τα εικονίδια των κοινωνικών μέσων χρησιμοποιώντας την τεχνική των sprite εικόνων και η Compass διαθέτει ένα χαρακτηριστικό για να κάνει αυτή τη δουλειά πιο γρήγορα.

Πρώτα από όλα, πρέπει να βάλουμε τα εικονίδια μας σε έναν ειδικό φάκελο - ας ονομάσουμε το φάκελο /κοινωνικός/, για παράδειγμα. Πίσω στο φύλλο στυλ, συνδέστε τα εικονίδια με τα παρακάτω @εισαγωγή κανόνας.

 @import "social / * .png"; 

ο κοινωνικός/ ανατρέξτε στο φάκελο στον οποίο αποθηκεύουμε τα εικονίδια. Αυτός ο φάκελος πρέπει να είναι τοποθετημένος μέσα στον φάκελο εικόνων. Τώρα, αν κοιτάξουμε στο φάκελο εικόνων μας, θα πρέπει να δούμε μια εικόνα sprite που παράγεται με τυχαίους χαρακτήρες, όπως social-sc805f18607.png. Σε αυτό το σημείο, τίποτα δεν συμβαίνει ακόμα στο front-end, μέχρι να εφαρμόσουμε τα στυλ με την ακόλουθη γραμμή.

 @περιλαμβάνουν όλα τα κοινωνικά-sprites? 

Τελικό αποτέλεσμα

Τέλος, μετά από όλη τη σκληρή δουλειά μπορούμε τώρα να δούμε το αποτέλεσμα σαν αυτό:

Σε περίπτωση που το πιστεύουμε 500px είναι πολύ μεγάλη αργότερα, χρειάζεται μόνο να αλλάξουμε την τιμή $ width μεταβλητή - για παράδειγμα, 350px - το υπόλοιπο θα “μαγικά” να ρυθμιστεί. Μπορείτε επίσης να πειραματιστείτε με τη μεταβλητή χρώματος.

• Προβολή επίδειξης
• Λήψη πηγής

συμπέρασμα

Σε αυτό το σεμινάριο σας έχουμε δείξει πώς να δημιουργήσετε ένα απλό ηλεκτρονικό vCard με Sass και Compass. αυτό είναι μόνο ένα παράδειγμα, ωστόσο. Το Sass και η πυξίδα είναι πράγματι ισχυρά, αλλά μερικές φορές δεν είναι απαραίτητο. Για παράδειγμα, όταν εργαζόμαστε σε έναν ιστότοπο με λίγες σελίδες και πιθανότατα θα χρειαστείτε λιγότερες γραμμές στυλ, η χρήση του Sass και της Compass θεωρείται υπερβολική.

Αυτή η θέση κλείνει τη σειρά Sass και ελπίζουμε να την απολαύσετε. Αν έχετε οποιαδήποτε απορία σχετικά με αυτό το θέμα μην διστάσετε να το προσθέσετε στο παρακάτω πλαίσιο σχολίων.