Jei yra vienas sutrumpinimas CSS dramatiškai nepataiko, tai yra vienas, kad būtų galima apibrėžti positionturtą, taip pat keturi ofsetinės savybės ( top, right, bottom, left).
Laimei, tai paprastai galima išspręsti naudojant CSS išankstinį procesorių, pvz., „Sass“. Turime sukurti tik paprastą rinkinį, kad sutaupytume 5 savybių deklaravimo rankiniu būdu.
/// 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; )Dabar mes naudodamiesi šiuo deriniu remiamės įvardytais argumentais, kad nereikėtų jų visų nustatyti, kai norima tik vieno ar dviejų. Apsvarstykite šį kodą:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... kuris susideda iš:
.foo ( position: absolute; top: 1em; left: 50%; )Iš tikrųjų „Sass“ niekada nepateikia savybės, kurios vertė yra null.
API supaprastinimas
Mes galėtume perkelti pozicijos tipą į „mixin“ pavadinimą, užuot reikėję apibrėžti jį kaip pirmąjį argumentą. Norėdami tai padaryti, mums reikia trijų papildomų mišinių, kurie tarnauja kaip ką tik apibrėžto „pozicijos“ mišinio pseudonimai.
/// 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… ); )Perrašydami ankstesnį pavyzdį:
.foo ( @include absolute($top: 1em, $left: 50%); )Einame toliau
Jei norite, kad sintaksė būtų artimesnė „Nib“ („Stylus“ sistema) pasiūlytai sintaksei, rekomenduoju pažvelgti į šį straipsnį.
.foo ( @include absolute(top 1em left 50%); )