pos
Сокращённый вариант записи свойств позиционирования.
Параметры
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
$position | string | absolute | Тип позиционирования (relative, absolute и т.д.). |
$values | list | () | Значения позиционирования в стандартном порядке (top-right-bottom-left)*. |
$z-index | number | null | Значение z-index , если оно необходимо. |
Значения могут быть пропущены используя
null
(предпочтительно) или его псевдоним
n
.
Пример использования
@use 'more-sass' as more;
.element-one {
@include more.pos('absolute', 10px);
}
.element-two {
@include more.pos('absolute', 10px 20px 30px 40px, 5);
}
.element-three {
@include more.pos('absolute', null auto);
}
.element-one {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
.element-two {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
z-index: 5;
}
.element-three {
position: absolute;
right: auto;
left: auto;
}
Также доступны сокращённые варианты записи для конкретных типов позиционирования:
pos-rel($values, $z-index)
pos-abs($values, $z-index)
pos-fix($values, $z-index)