anpleenko
1/26/2015 - 6:50 AM

[SASS] Position mixin

[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;
  }
}