Wenn es eine Kurzschrift CSS ist dramatisch verfehlt, es ist das einzige was es möglich macht , die zu definieren positionEigenschaft, sowie die vier Offset - Eigenschaften ( top, right, bottom, left).
Glücklicherweise kann dies normalerweise mit einem CSS-Präprozessor wie Sass gelöst werden. Wir müssen nur ein einfaches Mixin erstellen, um zu verhindern, dass die 5 Eigenschaften manuell deklariert werden.
/// 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; )Jetzt verlassen wir uns bei der Verwendung dieses Mixins auf benannte Argumente, um zu vermeiden, dass alle festgelegt werden müssen, wenn nur ein oder zwei gewünscht werden. Betrachten Sie den folgenden Code:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Was sich zusammensetzt in:
.foo ( position: absolute; top: 1em; left: 50%; )In der Tat gibt Sass niemals eine Eigenschaft aus, die einen Wert von hat null.
Vereinfachung der API
Wir könnten den Positionstyp 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 soeben 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%); )Weitergehen
Wenn Sie eine Syntax wünschen, die der von Nib (Stylus 'Framework) vorgeschlagenen näher kommt, empfehlen wir Ihnen, diesen Artikel zu lesen.
.foo ( @include absolute(top 1em left 50%); )