Če je ena okrajšava CSS močno pogreša, to je tista, ki omogoča opredelitev positionpremoženja, kot tudi štiri ofset lastnosti ( top, right, bottom, left).
Na srečo je to običajno nekaj, kar je mogoče rešiti s predprocesorjem CSS, kot je Sass. Zgraditi moramo le preprost mixin, da nas reši ročne prijave 5 lastnosti.
/// 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; )Stvar je v tem, da se pri uporabi te kombinacije zanašamo na imenovane argumente, da ne bi bilo treba nastaviti vseh, če želimo le enega ali dva. Upoštevajte naslednjo kodo:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Ki se prevede v:
.foo ( position: absolute; top: 1em; left: 50%; )Dejansko Sass nikoli ne izpiše lastnosti, ki ima vrednost null.
Poenostavitev API-ja
Tip položaja bi lahko premaknili na ime mixina, namesto da bi ga morali določiti kot prvi argument. Za to potrebujemo tri dodatne mešanice, ki bodo služile kot vzdevki za mešanico "položaja", ki smo jo pravkar določili.
/// 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… ); )Prepisovanje našega prejšnjega primera:
.foo ( @include absolute($top: 1em, $left: 50%); )Gremo naprej
Če želite skladnjo, ki je bližja tisti, ki jo je predlagal Nib (Stylusov okvir), vam priporočam, da si ogledate ta članek.
.foo ( @include absolute(top 1em left 50%); )