S'il y a un CSS raccourci considérablement les misses, il est celui qui permet de définir la positionpropriété, ainsi que les quatre propriétés de décalage ( top, right, bottom, left).
Heureusement, c'est généralement quelque chose qui peut être résolu avec un préprocesseur CSS tel que Sass. Nous n'avons qu'à construire un simple mixin pour nous éviter de déclarer les 5 propriétés manuellement.
/// 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; )Maintenant, le fait est que nous nous appuyons sur des arguments nommés lors de l'utilisation de ce mixin pour éviter d'avoir à tous les définir lorsque seulement un ou deux sont souhaités. Considérez le code suivant:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Qui se compile en:
.foo ( position: absolute; top: 1em; left: 50%; )En effet, Sass ne produit jamais une propriété qui a une valeur de null.
Simplifier l'API
Nous pourrions déplacer le type de position vers le nom du mixin au lieu d'avoir à le définir comme premier argument. Pour ce faire, nous avons besoin de trois mixins supplémentaires qui serviront d'alias au mixin `position` que nous venons de définir.
/// 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… ); )Réécrire notre exemple précédent:
.foo ( @include absolute($top: 1em, $left: 50%); )Aller plus loin
Si vous souhaitez une syntaxe plus proche de celle proposée par Nib (framework Stylus), je vous recommande de jeter un œil à cet article.
.foo ( @include absolute(top 1em left 50%); )