Hvis det er en kortform CSS dramatisk målet, er det den som gjør det mulig å definere positioneiendom, samt de fire utlignet egenskaper ( top, right, bottom, left).
Heldigvis er dette vanligvis noe som kan løses med en CSS-forprosessor som Sass. Vi trenger bare å lage en enkel blanding for å redde oss fra å erklære de 5 egenskapene manuelt.
/// 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å er saken at vi stoler på navngitte argumenter når vi bruker denne blandingen for å unngå å måtte sette dem alle når bare en eller to er ønsket. Vurder følgende kode:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... som samles til:
.foo ( position: absolute; top: 1em; left: 50%; )Sass leverer aldri en eiendom som har en verdi på null.
Forenkling av API
Vi kan flytte posisjonstypen til mixin-navnet i stedet for å måtte definere det som første argument. For å gjøre det trenger vi tre ekstra mixins som vil fungere som aliaser til den 'posisjonen' mixin vi nettopp har definert.
/// 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… ); )Omskriving av vårt forrige eksempel:
.foo ( @include absolute($top: 1em, $left: 50%); )Gå videre
Hvis du vil ha en syntaks nærmere den som Nib (Stylus 'framework) foreslår, anbefaler jeg at du tar en titt på denne artikkelen.
.foo ( @include absolute(top 1em left 50%); )