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

Question

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

@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)：返回列表中值的第一个索引（或 null）：

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

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

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

最后应用这个 mixin 位置。

position: $position;

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