Ако има едно съкращение CSS драстично пропуска, тя е тази, която прави възможно да се определи positionсобствеността, както и четирите компенсирани свойства ( top, right, bottom, left).
За щастие това обикновено е нещо, което може да бъде решено с CSS препроцесор като Sass. Трябва само да изградим прост миксин, за да ни спаси от декларирането на 5 свойства ръчно.
/// 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; )Сега работата е в това, че разчитаме на именувани аргументи, когато използваме този миксин, за да не се налага да ги задаваме всички, когато са желани само един или два. Обмислете следния код:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... който се компилира в:
.foo ( position: absolute; top: 1em; left: 50%; )Всъщност Sass никога не извежда свойство, което има стойност null.
Опростяване на API
Можем да преместим типа позиция на името на миксина, вместо да се налага да го дефинираме като първи аргумент. За целта ни трябват три допълнителни миксина, които ще служат като псевдоними на миксина на „позицията“, който току що дефинирахме.
/// 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… ); )Пренаписване на предишния ни пример:
.foo ( @include absolute($top: 1em, $left: 50%); )Отивайки по-нататък
Ако искате синтаксис, по-близък до този, предложен от Nib (рамката на Stylus), препоръчвам ви да разгледате тази статия.
.foo ( @include absolute(top 1em left 50%); )