Ako postoji jedan stenogram CSS dramatično promaši, to je onaj što je moguće definirati positionimovinu, kao i četiri prijeboja svojstva ( top, right, bottom, left).
Srećom, to je obično nešto što se može riješiti CSS pretprocesorom kao što je Sass. Moramo izgraditi samo jednostavnu kombinaciju kako bismo nas spasili od ručnog prijavljivanja 5 svojstava.
/// 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; )Stvar je u tome što se pri korištenju ove kombinacije oslanjamo na imenovane argumente kako bismo izbjegli da ih sve postavimo kada su željeni samo jedan ili dva. Razmotrite sljedeći kod:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Koji se kompilira u:
.foo ( position: absolute; top: 1em; left: 50%; )Zapravo, Sass nikada ne daje svojstvo koje ima vrijednost null.
Pojednostavljivanje API-ja
Mogli bismo premjestiti tip pozicije na ime kombinacije, umjesto da ga moramo definirati kao prvi argument. Da bismo to učinili, trebaju nam tri dodatna miksa koja će služiti kao zamjenska imena smjese `položaja` koju smo upravo definirali.
/// 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… ); )Prepisivanje našeg prethodnog primjera:
.foo ( @include absolute($top: 1em, $left: 50%); )Idući dalje
Ako želite sintaksu bližu onoj koju je predložio Nib (Stylusov okvir), preporučujem da pogledate ovaj članak.
.foo ( @include absolute(top 1em left 50%); )