Αν υπάρχει μια στενογραφία CSS δραματικά ατυχήματα, αυτό είναι το ένα που επιτρέπει να ορίσετε την positionιδιότητα, καθώς και οι τέσσερις offset ιδιότητες ( top, right, bottom, left).
Ευτυχώς, αυτό είναι συνήθως κάτι που μπορεί να λυθεί με έναν προεπεξεργαστή CSS όπως το Sass. Αρκεί να δημιουργήσουμε ένα απλό mixin για να μας σώσει από το να δηλώσουμε τις 5 ιδιότητες χειροκίνητα.
/// Shorthand mixin for offset positioning /// @param (String) $position - Either `relative`, `absolute` or `fixed` /// @param (Length) $top (null) - Top offset /// @param (Length) $right (null) - Right offset /// @param (Length) $bottom (null) - Bottom offset /// @param (Length) $left (null) - Left offset @mixin position($position, $top: null, $right: null, $bottom: null, $left: null) ( position: $position; top: $top; right: $right; bottom: $bottom; left: $left; )Τώρα το θέμα είναι ότι στηριζόμαστε σε ονομαστικά επιχειρήματα όταν χρησιμοποιούμε αυτό το mixin για να αποφύγουμε να τα ορίσουμε όλα όταν είναι επιθυμητό μόνο ένα ή δύο. Εξετάστε τον ακόλουθο κώδικα:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Που συγκεντρώνεται σε:
.foo ( position: absolute; top: 1em; left: 50%; )Πράγματι, το Sass δεν εξάγει ποτέ μια ιδιότητα που έχει τιμή null.
Απλοποίηση του API
Θα μπορούσαμε να μετακινήσουμε τον τύπο θέσης στο όνομα mixin αντί να πρέπει να τον ορίσουμε ως πρώτο όρισμα. Για να το κάνουμε αυτό, χρειαζόμαστε τρεις επιπλέον mixins που θα χρησιμεύσουν ως ψευδώνυμα στο mixin «position» που μόλις ορίσαμε.
/// Shorthand mixin for absolute positioning /// Serves as an alias for `position(absolute,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin absolute($args… ) ( @include position(absolute, $args… ); ) /// Shorthand mixin for relative positioning /// Serves as an alias for `position(relative,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin relative($args… ) ( @include position(relative, $args… ); ) /// Shorthand mixin for fixed positioning /// Serves as an alias for `position(fixed,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin fixed($args… ) ( @include position(fixed, $args… ); )Ξαναγράφοντας το προηγούμενο παράδειγμά μας:
.foo ( @include absolute($top: 1em, $left: 50%); )Πηγαίνοντας πιο μακριά
Αν θέλετε μια σύνταξη πλησιέστερη σε αυτήν που προτείνει ο Nib (πλαίσιο του Stylus), σας συνιστούμε να ρίξετε μια ματιά σε αυτό το άρθρο.
.foo ( @include absolute(top 1em left 50%); )