Si hay una CSS en forma abreviada drásticamente pierde, es el que hace posible definir la positionpropiedad, así como las cuatro propiedades de desplazamiento ( top, right, bottom, left).
Afortunadamente, esto suele ser algo que se puede resolver con un preprocesador CSS como Sass. Solo tenemos que construir un mixin simple para evitar que declaremos las 5 propiedades manualmente.
/// 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; )Ahora, la cuestión es que confiamos en argumentos con nombre cuando usamos este mixin para evitar tener que configurarlos todos cuando solo se desean uno o dos. Considere el siguiente código:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Que se compila en:
.foo ( position: absolute; top: 1em; left: 50%; )De hecho, Sass nunca genera una propiedad que tenga un valor de null.
Simplificando la API
Podríamos mover el tipo de posición al nombre de la mezcla en lugar de tener que definirlo como primer argumento. Para hacerlo, necesitamos tres mixins adicionales que servirán como alias para el mixin `position` que acabamos de definir.
/// 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… ); )Reescribiendo nuestro ejemplo anterior:
.foo ( @include absolute($top: 1em, $left: 50%); )Ir más lejos
Si quieres una sintaxis más cercana a la propuesta por Nib (marco de Stylus), te recomiendo que eches un vistazo a este artículo.
.foo ( @include absolute(top 1em left 50%); )