Om det finns en förkortning CSS dramatiskt missar, är det den som gör det möjligt att definiera den positionegenskapen, liksom de fyra förskjutna egenskaper ( top, right, bottom, left).
Lyckligtvis är detta vanligtvis något som kan lösas med en CSS-förprocessor som Sass. Vi behöver bara bygga ett enkelt mixin för att rädda oss från att deklarera de 5 egenskaperna manuellt.
/// 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; )Nu är saken att vi förlitar oss på namngivna argument när vi använder detta mixin för att undvika att behöva ställa in dem alla när bara en eller två önskas. Tänk på följande kod:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... som sammanställs till:
.foo ( position: absolute; top: 1em; left: 50%; )Faktum är att Sass aldrig matar ut en egendom som har ett värde på null.
Förenkla API: et
Vi kan flytta typen av position till mixin-namnet istället för att behöva definiera det som första argument. För att göra det behöver vi tre extra mixins som kommer att fungera som alias till den 'position' mixin vi just definierat.
/// 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… ); )Omskrivning av vårt tidigare exempel:
.foo ( @include absolute($top: 1em, $left: 50%); )Går längre
Om du vill ha en syntax närmare den som Nib föreslår (Stylus ramverk), rekommenderar jag att du tittar på den här artikeln.
.foo ( @include absolute(top 1em left 50%); )