Θέλεις να ανεβάσεις τα web projects σου σε άλλο επίπεδο; Με το Compass, ένα ισχυρό framework για Sass, αυτό γίνεται εύκολα. Σε αυτόν τον οδηγό θα μάθεις πώς να εκμεταλλευτείς αποτελεσματικά την υποστήριξη χαρακτηριστικών CSS3 μέσω του Compass. Πώς θα προχωρήσεις και ποιες λειτουργίες είναι διαθέσιμες, θα σου δείξω στα παρακάτω βήματα.
Σημαντικά συμπεράσματα
Η εργασία με το Compass και το CSS3 σου επιτρέπει να δημιουργείς σύγχρονο και συμβατό με browsers CSS. Το κεντρικό σημείο είναι η ιστοσελίδα του Compass, όπου θα βρεις την τεκμηρίωση και πολλές παραδείγματα. Με το Compass μπορείς να ενσωματώσεις εύκολα χαρακτηριστικά CSS3 όπως το border-radius ή το text-shadow και ωφελείσαι από αυτόματους προθέματα browser.
Βήμα-βήμα οδηγίες
Για να ξεκινήσεις με το Compass, χρειάζομαι αρχικά το αρχείο CSS σου και τη σωστή εισαγωγή. Πήγαινε στο project σου και άνοιξε το αρχείο CSS. Τώρα πρέπει να εισάγεις το Compass. Γι' αυτό γράφεις:
Αυτό σου δίνει το βασικό πλαίσιο για να δουλέψεις με το CSS3.
Τώρα θέλω να σου δείξω πώς δουλεύεις με το border-radius, καθώς αυτό είναι ένα πολύ πρακτικό παράδειγμα. Έχεις την επιλογή να επιλέξεις όλες τις λειτουργίες CSS3 ή συγκεκριμένες όπως το border-radius. Συνιστώ να ενσωματώσεις όλες τις λειτουργίες, ώστε να έχεις περισσότερες επιλογές στη διάθεσή σου.
Για να χρησιμοποιήσεις το border-radius, δημιουργείς μια κλάση ή ID, για παράδειγμα την ονομάζεις.content. Μετά, προσθέτεις στους γωνιακούς βρόχους τη συνάρτηση για το border-radius. Η σύνταξη θα τη βρεις στην τεκμηρίωση: Πρέπει να δηλώσεις την οριζόντια και κατακόρυφη ακτίνα.
Γράψε:
Αυτό το αποθηκεύεις και δες το αρχείο σου στον browser. Τι συμβαίνει; Η εντολή CSS border-radius συμπληρώνεται με τις αντίστοιχες προσθήκες προγράμματος περιήγησης. Έτσι αποκτάς όχι μόνο μια απλή δήλωση, αλλά και υποστήριξη για διάφορους browsers.
Με αυτόν τον τρόπο, μπορείς να χρησιμοποιήσεις όλα τα CSS3 variants που προσφέρει το Compass. Το κεντρικό σημείο για το CSS3 στο Compass είναι η αντίστοιχη ενότητα στην τεκμηρίωση, όπου είναι καταχωρημένες όλες οι λειτουργίες. Αν δεν καταλαβαίνεις κάτι ή θέλεις να το χρησιμοποιήσεις ξανά, απλά κοίταξε εκεί.
Τώρα ένα άλλο παράδειγμα, όπου καλείς μια λειτουργία. Πάλι πήγαινε στο CSS σου και γράψε:
Αυτή η σύνταξη εξασφαλίζει ότι το box-shadow θα εκδοθεί με τις κατάλληλες προσθήκες προγράμματος περιήγησης για κάθε υποστηριζόμενο browser.
Επιπλέον, το Compass σου προσφέρει τη δυνατότητα να καθορίσεις την υποστήριξη προγράμματος περιήγησης για το project σου. Εδώ μπορείς να ορίσεις ποιοι browsers πρέπει να υποστηρίζονται, κάτι που είναι ιδιαίτερα σημαντικό αν ο πελάτης σου απαιτεί υποστήριξη για παλαιότερες εκδόσεις browsers.
Καθόρισε την ελάχιστη έκδοση των browsers που θα χρησιμοποιηθούν. Με αυτό διασφαλίζεις ότι το Compass θα λάβει υπόψη αυτήν την απαίτηση.
Αυτά είναι τα βασικά βήματα, για να εργαστείς με το Compass και τις δυνατότητες CSS3. Η επίσημη ιστοσελίδα του project και η αναφορά κώδικα σου προσφέρουν τα πάντα που χρειάζεσαι για να εργαστείς αποτελεσματικά.
Σύνοψη
Με το Compass έχεις ένα ισχυρό εργαλείο που όχι μόνο σε βοηθά να υλοποιείς γρήγορα χαρακτηριστικά CSS3, αλλά διευκολύνει και την υποστήριξη browser. Πρέπει πάντα να έχεις στη διάθεσή σου την τεκμηρίωση του Compass για να αξιοποιήσεις τις εκτενείς δυνατότητες που σου προσφέρει αυτό το framework.
Συχνές ερωτήσεις
Τι είναι το Compass;Το Compass είναι ένα CSS framework για Sass, που σε βοηθά στη δημιουργία stylesheets.
Πώς εισάγω το Compass στο αρχείο CSS μου;Πρέπει να χρησιμοποιήσεις την εντολή @import 'compass'; στο αρχείο CSS σου για να εισάγεις το Compass.
Πώς μπορώ να χρησιμοποιήσω χαρακτηριστικά CSS3 με το Compass;Μπορείς να ενσωματώσεις χαρακτηριστικά CSS3 χρησιμοποιώντας mixins, όπως @include border-radius(...), άμεσα.
Ποιο είναι το πλεονέκτημα των προσθηκών browser;Οι προσθήκες browser εξασφαλίζουν ότι οι δηλώσεις CSS σου απεικονίζονται σωστά σε παλαιότερους browsers ή σε πειραματικές εκδόσεις browsers.
Πώς καθορίζω την υποστήριξη browser στο Compass;Μπορείς να ορίσεις την ελάχιστη υποστηριζόμενη έκδοση browser στη ρύθμιση του Compass.
