devblog-spinner

Sass position Mixins with z-index

Hi, During the development I got tried of using positions and all related properties, So I decided to makes a mixing to fix it for all.

So here it is

@mixin buildPosition($position, $args: (), $zindex: ()) {
  $offsets: top right bottom left;
  position: $position;
  @each $offset in $offsets {
    $index: index($args, $offset);
    @if $index {
      @if $index == length($args) {
        #{$offset}: 0;
      } @else {
        $next: nth($args, $index + 1);
        @if is-valid-length($next) {
          #{$offset}: $next;
        } @else if index($offsets, $next) {
          #{$offset}: 0;
        } @else {
          @warn "Invalid value `#{$next}` for offset `#{$offset}`.";
        }
      }
    }
  }
  @if $zindex != '' {
    z-index: $zindex;
  }
}

@mixin _absolute_mix($args: (), $zindex: '') {
  @include buildPosition(absolute, $args, $zindex);
}

@mixin _fixed_mix($args: (), $zindex: '') {
  @include buildPosition(fixed, $args, $zindex);
}

@mixin _relative_mix($args: (), $zindex: '') {
  @include buildPosition(relative, $args, $zindex);
}

forget about what I did in deep, totally I made 3 useful mixin ,

  • _absolute_mix (for absolute positions)
  • _fixed_mix (for fixed positions)
  • _relative_mix (for relative positions)

the usage all are same as each other. each mixing will accept 2 parameter. first parameter which is mandatory is the value of 1 or 4 possible directions.(top, bottom, right, left) second parameter which optional and you can skip it if you want is 'z-index' value. what ever you pass it will set as z-index value.

example usage:

@include _absolute_mix(top -2px left -2px, 3);
@include _absolute_mix(bottom 10px right 50px, 11);

set value as Zero like below

@include _absolute_mix(top right, 1);
@include _fixed_mix(top left, 99999);

and also you can use any kind of values, like % or em or ...

@include _absolute_mix(top -10px left 10%, 150);

any queries? leave a comment. Cheers.

No Comments Yet