Hvis der er én stenografi CSS dramatisk uheld, det er den ene gør det muligt at definere den positionejendom, samt de fire forskudte egenskaber ( top, right, bottom, left).
Heldigvis er dette typisk noget, der kan løses med en CSS-forprocessor som Sass. Vi skal kun oprette en simpel mixin for at redde os fra at erklære de 5 egenskaber 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; )Nu er sagen, at vi stoler på navngivne argumenter, når vi bruger dette mixin for at undgå at skulle indstille dem alle, når kun en eller to ønskes. Overvej følgende kode:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... som samles til:
.foo ( position: absolute; top: 1em; left: 50%; )Faktisk udsender Sass aldrig en ejendom, der har en værdi på null.
Forenkling af API
Vi kunne flytte positionstypen til mixin-navnet i stedet for at skulle definere det som første argument. For at gøre det har vi brug for tre ekstra mixins, der fungerer som aliaser til den 'position' mixin, vi lige har defineret.
/// 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 af vores tidligere eksempel:
.foo ( @include absolute($top: 1em, $left: 50%); )Går videre
Hvis du vil have en syntaks tættere på den, der er foreslået af Nib (Stylus 'framework), anbefaler jeg, at du kigger på denne artikel.
.foo ( @include absolute(top 1em left 50%); )