Mixin für Offset-Positionierung

Wenn es eine Kurzschreibweise gibt, die CSS dramatisch vermisst, dann ist es diejenige, die es ermöglicht, die `position`-Eigenschaft sowie die vier Offset-Eigenschaften (`top`, `right`, `bottom`, `left`) zu definieren.

Glücklicherweise ist dies typischerweise etwas, das mit einem CSS-Präprozessor wie Sass gelöst werden kann. Wir müssen nur ein einfaches Mixin erstellen, das uns davor bewahrt, die 5 Eigenschaften manuell zu deklarieren.

/// 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;
}

Nun ist die Sache, dass wir uns bei der Verwendung dieses Mixins auf benannte Argumente verlassen, um zu vermeiden, dass wir sie alle setzen müssen, wenn nur ein oder zwei gewünscht sind. Betrachten Sie den folgenden Code

.foo {
  @include position(absolute, $top: 1em, $left: 50%);
}

… was kompiliert zu

.foo {
  position: absolute;
  top: 1em;
  left: 50%;
}

Tatsächlich gibt Sass niemals eine Eigenschaft aus, die einen Wert von `null` hat.

Vereinfachung der API

Wir könnten den Typ der Position in den Mixin-Namen verschieben, anstatt ihn als erstes Argument definieren zu müssen. Dazu benötigen wir drei zusätzliche Mixins, die als Aliase für das gerade definierte `position`-Mixin dienen.

/// 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...);
}

Umschreiben unseres vorherigen Beispiels

.foo {
  @include absolute($top: 1em, $left: 50%);
}