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

这些是带有参数的@mixins，就像函数一样，mixin是一段可以重用的代码。第一个是方向上的循环：顶部，左侧，底部，右侧：

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

$ dir以及$ i只是局部变量。 index（$ args，$ dir）：返回list中的第一个值索引（或null）：

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

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

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

在这个mixin的末尾应用了。

position: $position;

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

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

1 个答案: