Έχουμε μιλήσει για το "Why Ems;" εδώ πριν.
Για όσους είναι νέοι στις τιμές, το Mozilla Developer Network κάνει εξαιρετική δουλειά για να εξηγήσει τα ems:
… Ένα em είναι ίσο με το μέγεθος της γραμματοσειράς που ισχύει για τον γονέα του εν λόγω στοιχείου. Εάν δεν έχετε ορίσει το μέγεθος της γραμματοσειράς οπουδήποτε στη σελίδα, τότε είναι το προεπιλεγμένο πρόγραμμα περιήγησης, το οποίο είναι πιθανώς 16px. Έτσι, από προεπιλογή 1em = 16px και 2em = 32px.
Εάν εξακολουθείτε να προτιμάτε να σκέφτεστε σε px, αλλά όπως τα οφέλη των em, δεν χρειάζεται να έχετε τον υπολογιστή σας βολικό, μπορείτε να αφήσετε τον Sass να κάνει τη δουλειά για εσάς. Υπάρχουν διάφοροι τρόποι υπολογισμού ems με το Sass.
Ενσωματωμένα μαθηματικά:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Σημείωση: Χρειαζόμαστε εκεί το "* 1em" για να προσθέσει σωστά την τιμή μονάδας το Sass. Μπορείτε επίσης να χρησιμοποιήσετε το "+ 0em" για τον ίδιο σκοπό.
Αποτέλεσμα:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Αυτό λειτουργεί, αλλά μπορούμε να το κάνουμε ευκολότερο.
Η συνάρτηση em () Sass
Υπάρχουν αρκετοί διαφορετικοί τρόποι για να γράψετε αυτήν τη λειτουργία, αυτή από ένα άρθρο Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Σούπερ έξυπνο! Αυτή η συνάρτηση χρησιμοποιεί την παρεμβολή συμβολοσειρών Sass για να τα προσαρτήσει στην τιμή. Λάβετε υπόψη ότι η παράμετρος $ konteks έχει μια προεπιλεγμένη τιμή $ πρόγραμμα περιήγησης (έτσι, ό, τι κι αν ορίσετε αυτήν τη μεταβλητή). Αυτό σημαίνει ότι όταν καλείτε τη συνάρτηση στο Sass σας, πρέπει να ορίσετε μόνο την $pixelsτιμή και τα μαθηματικά θα υπολογιστούν σε σχέση με $browser-context- σε αυτήν την περίπτωση - 16px.
Παράδειγμα χρήσης:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Αποτέλεσμα:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Μια παρόμοια συνάρτηση που χρησιμοποιεί μαθηματικά αντί της παρεμβολής συμβολοσειρών από το The Sass Way μπορεί εύκολα να τροποποιηθεί για να δέχεται μεταβλητές όπως η συνάρτηση παρεμβολής συμβολοσειρών μας:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )Μια άλλη που χρησιμοποιεί τη μέθοδο Sass 'unitless ():
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )Αυτό μας επιτρέπει είτε να συμπεριλάβουμε τη μονάδα px είτε όχι στην κλήση λειτουργίας.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )