Ja ir kāds saīsinājums CSS dramatiski neizmanto, tas ir viens, kas ļautu definēt positionmantu, kā arī četri ofseta īpašības ( top, right, bottom, left).
Par laimi, to parasti var atrisināt ar CSS priekšapstrādātāju, piemēram, Sass. Mums tikai jāveido vienkāršs maisījums, lai glābtu mūs no 5 rekvizītu deklarēšanas manuāli.
/// 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; )Lietojot šo kombināciju, mēs paļaujamies uz nosauktajiem argumentiem, lai izvairītos no visu to iestatīšanas, ja vēlaties tikai vienu vai divus. Apsveriet šādu kodu:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Kas apkopo:
.foo ( position: absolute; top: 1em; left: 50%; )Patiešām, Sass nekad neizdod īpašumu, kura vērtība ir null.
API vienkāršošana
Mēs varētu pārvietot pozīcijas veidu uz mixin nosaukumu, nevis noteikt to kā pirmo argumentu. Lai to izdarītu, mums ir nepieciešami trīs papildu maisījumi, kas kalpos kā aizstājvārdi tikko definētajam “position” miksinam.
/// 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… ); )Pārrakstot mūsu iepriekšējo piemēru:
.foo ( @include absolute($top: 1em, $left: 50%); )Dodamies tālāk
Ja vēlaties, lai sintakse būtu tuvāka Nib (Stylus 'ietvara) piedāvātajai sintaksei, iesaku ielūkoties šajā rakstā.
.foo ( @include absolute(top 1em left 50%); )