Kui on üks stenografist CSS dramaatiliselt igatseb, see on üks, mis võimaldab määratleda positionvara, samuti nelja nihe omadused ( top, right, bottom, left).
Õnneks on see tavaliselt midagi, mida saab lahendada CSS-i eelprotsessoriga nagu Sass. Peame ehitama ainult lihtsa segu, et päästa meid 5 omaduse käsitsi deklareerimisest.
/// 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; )Nüüd on selle miksi kasutamisel tuginetud nimetatud argumentidele, et vältida nende kõigi seadistamist, kui soovitakse ainult ühte või kahte. Mõelge järgmisele koodile:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Mis koosneb järgmisest:
.foo ( position: absolute; top: 1em; left: 50%; )Tõepoolest, Sass ei anna kunagi vara, mille väärtus on null.
API lihtsustamine
Võiksime positsiooni tüübi viia mixini nimele, selle asemel, et peaksime seda määratlema esimese argumendina. Selleks vajame kolme täiendavat miksiini, mis toimivad äsja määratletud "positsiooni" miksi varjunimedena.
/// 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… ); )Meie eelmise näite ümberkirjutamine:
.foo ( @include absolute($top: 1em, $left: 50%); )Edasi minnes
Kui soovite süntaksi lähemale Nibi pakutule (Styluse raamistik), soovitan teil seda artiklit vaadata.
.foo ( @include absolute(top 1em left 50%); )