Ak existuje jedna skratka CSS dramaticky minie, to je ten, aby bolo možné definovať positionvlastnosť, rovnako ako štyri ofsetové vlastnosti ( top, right, bottom, left).
Našťastie je to zvyčajne niečo, čo sa dá vyriešiť pomocou preprocesora CSS, ako je Sass. Musíme len vytvoriť jednoduchý mixin, ktorý nám ušetrí ručné deklarovanie 5 vlastností.
/// 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; )Teraz sa pri použití tohto mixu spoliehame na pomenované argumenty, aby sme nemuseli nastavovať všetky, keď je požadovaný iba jeden alebo dva. Zvážte nasledujúci kód:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Ktorý sa zostavuje do:
.foo ( position: absolute; top: 1em; left: 50%; )Spoločnosť Sass v skutočnosti nikdy nevytvorí vlastnosť, ktorá má hodnotu null.
Zjednodušenie API
Typ pozície by sme mohli presunúť do názvu mixinu, namiesto toho, aby sme ho museli definovať ako prvý argument. Potrebujeme na to tri ďalšie mixíny, ktoré budú slúžiť ako aliasy mixu `pozície`, ktorý sme práve definovali.
/// 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… ); )Prepisujeme náš predchádzajúci príklad:
.foo ( @include absolute($top: 1em, $left: 50%); )Ďalej
Ak chcete mať syntax bližšie k tej, ktorú navrhuje Nib (Stylusov rámec), odporúčam vám pozrieť sa na tento článok.
.foo ( @include absolute(top 1em left 50%); )