Mixin для смещения позиционирования онлайн урок.


Если есть один сокращенный CSS, который резко промахивается, он позволяет определить свойствоposition, а также четыре свойства смещения (top,right,bottom,left).

К счастью, это обычно то, что можно решить с помощью препроцессора CSS, такого как Sass. Нам нужно только создать простой mixin, чтобы спасти нас от объявления свойств 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;
}

Теперь мы полагаемся на именованные аргументы при использовании этого mixin, чтобы избежать необходимости устанавливать их все, когда требуется только один или два. Рассмотрим следующий код:

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

... который компилируется в:

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

В самом деле, Sass никогда не выводит свойство, которое имеет значениеnull.

# Упрощение API

Мы могли бы переместить тип позиции в имя mixin вместо того, чтобы определять его как первый аргумент. Для этого нам нужны три дополнительных миксина, которые будут служить в качестве псевдонимов для `` `` `mix`, который мы только что определили.

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