Jeżeli jest skrótem CSS dramatycznie trafi, to jest jeden umożliwiający określenie positionwłasności, jak również cztery offsetowe właściwości ( top, right, bottom, left).
Na szczęście jest to zazwyczaj coś, co można rozwiązać za pomocą preprocesora CSS, takiego jak Sass. Musimy tylko zbudować prosty mikser, aby uchronić nas przed ręcznym deklarowaniem 5 właściwości.
/// 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; )Chodzi o to, że korzystamy z nazwanych argumentów, gdy używamy tego miksera, aby uniknąć konieczności ustawiania ich wszystkich, gdy pożądany jest tylko jeden lub dwa. Rozważ następujący kod:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Który składa się na:
.foo ( position: absolute; top: 1em; left: 50%; )Rzeczywiście, Sass nigdy nie generuje właściwości, która ma wartość null.
Uproszczenie API
Moglibyśmy przenieść typ pozycji do nazwy miksera, zamiast definiować go jako pierwszy argument. Aby to zrobić, potrzebujemy trzech dodatkowych miksów, które będą służyć jako aliasy do właśnie zdefiniowanego miksu „position”.
/// 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… ); )Przepisując nasz poprzedni przykład:
.foo ( @include absolute($top: 1em, $left: 50%); )Idąc dalej
Jeśli chcesz mieć składnię bliższą tej proponowanej przez Nib (framework Stylusa), polecam zajrzeć do tego artykułu.
.foo ( @include absolute(top 1em left 50%); )