Ενώ είναι πολύ χρήσιμο με την αριθμητική, ο Sass πέφτει λίγο με τις μαθηματικές λειτουργίες βοηθού. Υπήρξε ένα ανοιχτό ζήτημα στο επίσημο αποθετήριο για να ζητήσουμε περισσότερες συναρτήσεις που σχετίζονται με τα μαθηματικά για σχεδόν 3 χρόνια.
Ορισμένοι προμηθευτές τρίτων όπως το Compass ή το SassyMath παρέχουν προηγμένη υποστήριξη για λειτουργίες μαθηματικών, αλλά είναι εξωτερικές εξαρτήσεις που θα μπορούσαν (πρέπει;) να αποφευχθούν.
Ένα από τα πιο δημοφιλή αιτήματα σε αυτό το θέμα είναι η λειτουργία τροφοδοσίας ή ακόμη και ένας εκθέτης. Δυστυχώς, εξακολουθεί να μην υπάρχει υποστήριξη για αυτό στο Sass και ενώ βρίσκεται ακόμη υπό ενεργή συζήτηση, είναι απίθανο να συμβεί πολύ σύντομα.
Εν τω μεταξύ, το να είναι σε θέση να αυξήσει έναν αριθμό σε μια συγκεκριμένη ισχύ είναι πολύ χρήσιμο στο CSS. Ακολουθούν μερικά παραδείγματα όπου θα ήταν βολικό:
- για τον προσδιορισμό της φωτεινότητας ενός χρώματος ·
- για να διορθώσετε έναν αριθμό σε ένα ορισμένο ποσό ψηφίων,
- να κάνουμε κάποια (αντίστροφη) τριγωνομετρία…
Εφαρμογή Sass
Ευτυχώς για εμάς, είναι δυνατό (και αρκετά απλό) να δημιουργήσουμε μια λειτουργία ισχύος με τίποτα εκτός από τον Sass. Το μόνο που χρειαζόμαστε είναι ένας βρόχος και μερικοί βασικοί μαθηματικοί τελεστές (όπως *και /).
Θετικοί ακέραιοι εκθέτες
Η λειτουργία μας (που ονομάζεται pow) στη μικρότερη μορφή της θα μοιάζει με αυτήν:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Εδώ είναι ένα παράδειγμα:
.foo ( width: pow(20, 2) * 1px; // 400px )Θετικοί ή αρνητικοί ακέραιοι εκθέτες
Ωστόσο, λειτουργεί μόνο με ένα θετικό όρισμα «$ power». Η αποδοχή αρνητικών εκθετών δεν θα ήταν τόσο δύσκολη, χρειαζόμαστε μια μικρή επιπλέον συνθήκη:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent < 0 ( @for $i from 1 through -$exponent ( $value: $value / $number; ) ) @return $value; )Εδώ είναι ένα παράδειγμα:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Θετικοί ή αρνητικοί εκθέτες
Τώρα, τι γίνεται αν θέλουμε μη ακέραιους εκθέτες; Όπως 4.2για παράδειγμα; Η αλήθεια είναι ότι δεν είναι εύκολο. Εξακολουθεί να είναι εφικτό, αλλά απαιτεί περισσότερα από ένα βρόχο και λίγες λειτουργίες.
Αυτό έγινε στο αποθετήριο Bourbon προκειμένου να ολοκληρωθεί η modular-scale(… )λειτουργία από το πλαίσιο (αν και έχει απορριφθεί). Εδώ είναι ο κωδικός:
@function pow($number, $exponent) ( @if (round($exponent) != $exponent) ( @return exp($exponent * ln($number)); ) $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent pow(10, $ten-exp)) ( $ten-exp: $ten-exp + 1; ) @return summation(ln-maclaurin, $value / pow(10, $ten-exp), 1, 100) + $ten-exp * $ln-ten; )Περαιτέρω εκτιμήσεις
Λοιπόν, αυτό ήταν έντονο. Εάν τυχαίνει να χρειάζεστε υποστήριξη για μη ακέραιους εκθέτες (όπως 4.2), σας συνιστώ να χρησιμοποιήσετε μια εξωτερική εξάρτηση που την παρέχει (όπως sass-math-pow) αντί να συμπεριλάβετε όλο αυτόν τον κώδικα στο έργο σας. Όχι ότι είναι κακό καθ 'εαυτό, αλλά δεν είναι πραγματικά ο ρόλος του έργου σας να φιλοξενήσετε τόσο μεγάλο αριθμό μη εγκεκριμένου κώδικα πολυπλήρωσης (γι' αυτό έχουμε διαχειριστές πακέτων).
Σημειώστε επίσης ότι όλες αυτές οι λειτουργίες είναι αρκετά εντατικές για ένα τόσο λεπτό στρώμα όπως το Sass. Σε αυτό το σημείο, και εάν το σχέδιό σας βασίζεται σε προηγμένες μαθηματικές συναρτήσεις, είναι πιθανώς καλύτερο να περάσετε την εφαρμογή αυτών των βοηθών από το ανώτερο επίπεδο (Node.js, Ruby κ.λπ.) στο Sass μέσω ενός συστήματος plugin (Eyeglass, Ruby πολύτιμος λίθος, κ.λπ.).
Αλλά για βασική pow(… )χρήση, δεν μπορώ να προτείνω τις απλές εκδόσεις!
