Se há uma taquigrafia CSS dramaticamente perde, é o único tornando possível definir a positionpropriedade, bem como as quatro propriedades de deslocamento ( top, right, bottom, left).
Felizmente, isso normalmente é algo que pode ser resolvido com um pré-processador CSS como o Sass. Nós só temos que construir um mixin simples para nos salvar de declarar as 5 propriedades 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; )Agora, a questão é que contamos com argumentos nomeados ao usar este mixin para evitar ter que definir todos eles quando apenas um ou dois são desejados. Considere o seguinte código:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... que compila em:
.foo ( position: absolute; top: 1em; left: 50%; )Na verdade, Sass nunca produz uma propriedade que tenha um valor de null.
Simplificando a API
Poderíamos mover o tipo de posição para o nome do mixin em vez de defini-lo como primeiro argumento. Para fazer isso, precisamos de três mixins extras que servirão como apelidos para o 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… ); )Reescrevendo nosso exemplo anterior:
.foo ( @include absolute($top: 1em, $left: 50%); )Indo além
Se você deseja uma sintaxe mais próxima da proposta pelo Nib (framework da Stylus), recomendo que você dê uma olhada neste artigo.
.foo ( @include absolute(top 1em left 50%); )