CODEWITHSUNDEEP
csssassmixinsscss-mixins
John Taylor
John Taylor

Reputation: 779

I don't understand that mixin - I need some explanation

I'm new to mixins and I try to understand this one. Could you please explain this particular one to me? What does it do?

@mixin _position($position, $args) {
  @each $dir in top, left, bottom, right {
    $i: index($args, $dir);

    @if $i {
      #{$dir}: nth($args, $i + 1);
    }
  }

  position: $position;
}

@mixin absolute($args) {
  @include _position(absolute, $args);
}

@mixin relative($args) {
  @include _position(relative, $args);
}

@mixin fixed($args) {
  @include _position(fixed, $args);
}

@mixin sizing($args, $prefix: "") {
  $width: if(length($args) == 2, nth($args, 1), $args);
  $height: if(length($args) == 2, nth($args, 2), $args);

  #{$prefix}width: $width;
  #{$prefix}height: $height;
}

I don't undestand what is the point of writing it in that style and what it actually do...

Upvotes: 0

Views: 139

Answers (1)

a a
a a

Reputation: 34

These are sass @mixins with arguments, just like a function, mixin is a piece of code which can be reused. The first one there is a loop over directions: top, left, bottom, right:

@each $dir in top, left, bottom, right

$dir as well as $i just local variables. index($args, $dir): returns the first index of value in list (or null): 

$i: index($args, $dir);

When $i exists nth function is called. It gets the $i + 1 item in a list and put it in $dir:

#{$dir}: nth($args, $i + 1);

In the end of this mixin position is applied.

position: $position;

In other mixins of this snippet, the firs one is called by using @include Sass documentation is very detailed you can read more there.

Upvotes: 2

Related Questions