Als er één steno CSS dramatisch missers, het is degene die het mogelijk maakt om het te definiëren positioneigendom, evenals de vier offset eigenschappen ( top, right, bottom, left).
Gelukkig is dit typisch iets dat kan worden opgelost met een CSS-preprocessor zoals Sass. We hoeven alleen maar een eenvoudige mixin te bouwen om te voorkomen dat we de 5 eigenschappen handmatig declareren.
/// 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; )Het punt is nu dat we vertrouwen op benoemde argumenten bij het gebruik van deze mix om te voorkomen dat we ze allemaal moeten instellen als er maar een of twee gewenst zijn. Beschouw de volgende code:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... die zich compileert in:
.foo ( position: absolute; top: 1em; left: 50%; )Sass geeft inderdaad nooit een eigenschap weer met de waarde null.
Vereenvoudiging van de API
We zouden het type positie naar de mixin naam kunnen verplaatsen in plaats van het als eerste argument te moeten definiëren. Om dit te doen, hebben we drie extra mixins nodig die zullen dienen als aliassen voor de `position` mix die we zojuist hebben gedefinieerd.
/// 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… ); )Ons vorige voorbeeld herschrijven:
.foo ( @include absolute($top: 1em, $left: 50%); )Verder gaan
Als je een syntaxis wilt die dichter bij de syntaxis ligt die wordt voorgesteld door Nib (het framework van Stylus), raad ik je aan om dit artikel te lezen.
.foo ( @include absolute(top 1em left 50%); )