9 Βιβλιοθήκες Mixin Για τους σχεδιαστές Sass πρέπει να πάρουν

Εάν χρησιμοποιείτε το Sass στη ροή εργασίας ανάπτυξης, γνωρίζετε τη σημασία των μιξινών. Όταν βλέπετε κάποια πράγματα που είναι γραμμένα επανειλημμένα και επιμελώς στο CSS, αυτό είναι όπου mixins μπορεί να σας βοηθήσει να αποτρέψετε την επαναλαμβανόμενη εργασία. Ένα mixin περιέχει δηλώσεις CSS που μπορείτε να επαναχρησιμοποιήσετε σε ολόκληρο τον ιστότοπό σας.

Υπάρχουν πολλοί mixins που γίνονται από προγραμματιστές, για να σας βοηθήσουν όταν εργάζεστε με την Sass στην ανάπτυξη σας. Τα περισσότερα καλύπτουν πράγματα που συχνά επαναλαμβάνονται στο CSS. Από προσαρμόζοντας σε πολλαπλά προγράμματα περιήγησης προς το δημιουργώντας κουμπιά, κινούμενα σχέδια και εφέ μετάβασης, βρείτε αυτό και περισσότερα στις ακόλουθες 11 βιβλιοθήκες mixin που πρέπει να πάρετε για την ανάπτυξη του Sass σας.

1. Bourbon

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

Ελέγξτε την πλήρη τεκμηρίωση για να χρησιμοποιήσετε κάθε διαθέσιμο mixin και λειτουργία.

2. Sass CSS3 Mixins

Το Sass CSS3 Mixins παρέχει mixins που λειτουργούν σε διαφορετικά προγράμματα περιήγησης. Θα βρείτε ένα σωρό συνδυασμούς βέλτιστων πρακτικών εδώ, όπως φόντο, σύνορα, κουτί, στήλη, γραμματοσειρά, μετασχηματισμό, μετάβαση και κινούμενα σχέδια. Αρκεί για τις ανάγκες σας στο styling. Για να χρησιμοποιήσετε, εισαγάγετε το css3-mixins.scss και καλέστε το mixin στην τάξη CSS.

Κατεβάστε αυτό το mixin εδώ.

3. CssOwl

Το CssOwl παρέχει χρήσιμες αναμνήσεις για να ρυθμίσετε τη θέση ενός στοιχείου (σχετική ή απόλυτη) και να προσθέσετε περιεχόμενο στον ψευδοεπιλογέα ( :μετά και :πριν). Βοηθά επίσης όταν θέλετε να δημιουργήσετε στοιχεία sprite: το mixin παρέχει ευελιξία για να ρυθμίσετε τη θέση της εικόνας στο sprite σας. Εκτός από το Sass, η βιβλιοθήκη mixin CssOwl είναι επίσης διαθέσιμη για το LESS και το Stylus.

4. Σημείο διακοπής Sass

Το σημείο διακοπής σας βοηθά να κάνετε ερωτήματα μέσων μέσω του Sass με έναν απλό τρόπο. Με το Breakpoint, μπορείτε να δημιουργήσετε μεταβλητές και να τους δώσετε μια τιμή που καθορίζει το min-πλάτος ή μέγιστο πλάτος των ερωτημάτων των μέσων ενημέρωσης. Δεδομένου ότι η μεταβλητή που έχετε δημιουργήσει έχει ένα σημαντικό όνομα, μπορείτε να το καλέσετε εύκολα για χρήση στο Sass.

5. Φόρεμα

Το Scut περιέχει ένα σύνολο επαναχρησιμοποιήσιμων αναμικτήρων Sass, εντολών τοποθεσίας, λειτουργιών και μεταβλητών που σας βοηθούν να εφαρμόσετε εύκολα κοινά πρότυπα κώδικα στυλ. Παρέχει κώδικα με τις καλύτερες πρακτικές για να δημιουργήσει περιεχόμενο στον ιστό, όπως διατάξεις σελίδας και τυπογραφικό στυλ. Μπορείτε να μειώσετε την επανάληψη όταν γράφετε κώδικα επαναλαμβάνοντας τον κώδικα πιο συχνά. Έτσι, βοηθώντας σας να είστε πιο οργανωμένοι στη διαδικασία.

6. Σαφράν

Με το Saffron, μπορείτε να προσθέσετε κινούμενα σχέδια και μεταβάσεις CSS3 με ευκολία. Υπάρχουν δώδεκα κινούμενες εικόνες και μεταβάσεις διαθέσιμες, συμπεριλαμβανομένης της εξασθένησης εισόδου / εξόδου, ολίσθησης / σμίκρυνσης, αύξησης / εξόδου καθώς και διαφόρων επιδράσεων όπως κούνημα, teeter, αναπήδηση και άλλα. Για να χρησιμοποιήσετε το Saffron, πρέπει να συμπεριλάβετε το mixin στη δήλωση Sass και να καλέσετε το όνομα του εφέ μέσα στην κλάση CSS. Μπορείτε να πάρετε το Saffron εγκαθιστώντας το χρησιμοποιώντας Bower ή Gem, ή απλά να το κατεβάσετε με το χέρι από το Github.

7. Πληκτρολογήστε Ρυθμίσεις

Το TypeSettings είναι ένα είδος εργαλειοθήκης για το Sass. Θα ορίσει μέγεθος γραμματοσειράς σε σπονδυλωτή κλίμακα χρησιμοποιώντας τίτλους em (αντί για rems ή εικονοστοιχεία), κάθετο ρυθμό και τίτλους με βάση την αναλογία ευαισθησίας. Μπορείτε να το εγκαταστήσετε και με το Bower, να κατεβάσετε την έκδοση ή να κλωνοποιήσετε το repo. Για περισσότερες λεπτομέρειες, δείτε τη σελίδα του.

8. Γραμμή Sass

Το Sass Line είναι ένα Sass mixin που σας βοηθά να κάνετε καλύτερη τυπογραφία. Χρησιμοποιεί τη μονάδα rems στη γραμματοσειρά σας ώστε να μπορείτε να την επεξεργαστείτε αναλογικά από το πλέγμα γραμμής βάσης. Το Sass Line χρησιμοποιεί έναν ακριβή κατακόρυφο ρυθμό βασισμένο στο πλέγμα γραμμής βάσης και σας επιτρέπει να ορίσετε μια σπονδυλωτή κλίμακα για κάθε σημείο διακοπής σας για να έχετε καλές αναλογίες σε όλες τις πτυχές του ιστότοπού σας.

Πηγαίνετε εδώ για περισσότερες πληροφορίες σχετικά με τον τρόπο χρήσης του.

9. Andy.scss

Το Andy.scss είναι μια συλλογή από χρήσιμα μίγματα Sass, κατασκευασμένα για να σας βοηθήσουν να αναπτύξετε την εμφάνιση ενός ιστότοπου με ευκολία διατηρώντας παράλληλα το φως. Υπάρχουν δεκάδες mixins Sass, από φόντο σε κινούμενα σχέδια. Σχεδόν όλες οι κοινές-χρησιμοποιούμενες ιδιότητες CSS καλύπτονται εδώ. Πάρτε το στο Github.

Περισσότερες Δημοσιεύσεις για το Sass:

• Ξεκινώντας με το Sass
• Πετώντας στο Sass
• Πώς να Συγγραφή Sass με Υψηλό Κείμενο
• Χρησιμοποιώντας το Bootstrap 3 με το Sass
• Πώς να οικοδομήσουμε μια ηλεκτρονική VCard με Sass & Πυξίδα
• CSS Preprocessors σε σύγκριση: Sass Vs. ΠΙΟ ΛΙΓΟ
• Συντακτικά φοβερά φύλλα στυλ: Χρησιμοποιώντας πυξίδα στο Sass
• Πώς να μετατρέψετε το CSS σε Sass & SCSS