Dacă există un CSS prescurtare dramatic rateaza, este cel care face posibilă definirea positionproprietății, precum și cele patru proprietăți offset ( top, right, bottom, left).
Din fericire, acest lucru este de obicei ceva ce poate fi rezolvat cu un preprocesor CSS, cum ar fi Sass. Trebuie doar să construim un mixin simplu pentru a ne salva de la declararea manuală a celor 5 proprietăți.
/// 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; )Acum lucrul este că ne bazăm pe argumente numite atunci când folosim acest mixin pentru a evita să le setăm pe toate atunci când sunt dorite doar una sau două. Luați în considerare următorul cod:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... care se compilează în:
.foo ( position: absolute; top: 1em; left: 50%; )Într-adevăr, Sass nu produce niciodată o proprietate care are o valoare de null.
Simplificarea API-ului
Am putea muta tipul de poziție la numele mixin în loc să fie necesar să-l definim ca primul argument. Pentru a face acest lucru, avem nevoie de trei amestecuri suplimentare care să servească drept aliasuri la mixul „poziție” pe care tocmai l-am definit.
/// 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… ); )Rescrierea exemplului nostru anterior:
.foo ( @include absolute($top: 1em, $left: 50%); )Mergând mai departe
Dacă doriți o sintaxă mai apropiată de cea propusă de Nib (cadrul Stylus), vă recomand să aruncați o privire la acest articol.
.foo ( @include absolute(top 1em left 50%); )