Skip to content

Instantly share code, notes, and snippets.

@anpleenko
Last active August 29, 2015 14:14
Show Gist options
  • Save anpleenko/7192d552541959a03bde to your computer and use it in GitHub Desktop.
Save anpleenko/7192d552541959a03bde to your computer and use it in GitHub Desktop.
[SASS] Position mixin
// миксин для сокращенной записи позиции блоков
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// миксин принимает до 3 аргументов:
// - position (relative, static, fixed, absolute) - не обязательный аргумент
// - coordinates (положительные и отрицательные числа, none) - обязательно
// - z-index (положительные и отрицательные числа) - не обязательный аргумент
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// пример использования:
// @include position(absolute, 32 auto 5 4);
// @include position(32 auto 5 4, 34);
// @include position(fixed, 0 auto none 4, 23);
// @include position(static, 23 auto 5 4);
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@mixin position ($position: relative, $coordinates: 0 0 0 0, $z-index: none) {
@if type-of($position) == list {
$z-index: $coordinates;
$coordinates: $position;
$position: none;
}
@if type-of($z-index) == list {
$z-index: none;
}
$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);
@if $position == none {
} @else {
position: $position;
}
@if $z-index == none {}
@else {
z-index: $z-index;
}
@if $top == auto {
top: $top;
}
@else if $top == 0{
top: $top;
}
@else if $top == none{}
@else{
top: $top + px;
}
@if $right == auto {
right: $right;
}
@else if $right == 0{
right: $right;
}
@else if $right == none{}
@else if {
right: $right + px;
}
@if $bottom == auto {
bottom: $bottom;
}
@else if $bottom == 0{
bottom: $bottom;
}
@else if $bottom == none{}
@else if {
bottom: $bottom + px;
}
@if $left == auto {
left: $left;
}
@else if $left == 0{
left: $left;
}
@else if $left == none{}
@else if {
left: $left + px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment