我不明白那个 mixin - 我需要一些解释

Question

我是 mixin 的新手，我试图理解这个。你能给我解释一下这个特别的吗？它有什么作用？

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

我不明白用那种风格写它有什么意义，它实际上做了什么......

Answer 1

这些是sass带参数的@mixins，就像函数一样，mixin是一段可以复用的代码。第一个在方向上有一个循环：上、左、下、右：

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

$dir 和 $i 只是局部变量。 index($args, $dir): returns 列表中值的第一个索引（或 null）：

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

当$i存在时调用第n个函数。它获取列表中的 $i + 1 项并将其放入 $dir:

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

最后应用了这个混合位置。

position: $position;

在此代码段的其他 mixin 中，第一个是使用 @include 调用的 Sass 文档非常详细，您可以在那里阅读更多内容。

我不明白那个 mixin - 我需要一些解释

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

css

sass

mixins

scss-mixins