Question

到目前为止，我已设法为justify-content编写类和修饰符，如下所示：

.flex {
display: flex;

$positions: (
    start: flex-start,
    end: flex-end,
    center: center,
    around: space-around,
    between: space-between
    );

@each $mod, $dir in $positions {
    &--just-#{$mod} {
        justify-content: $dir;
    }
}

}

效果很好，但现在我正在尝试对齐对齐项目，而不必重复@each语句。

所以我想我可以做一个混音：

    $positions: (
    start: flex-start,
    end: flex-end,
    center: center,
    around: space-around,
    between: space-between
    );

@mixin just-align($name, $prop) {
    @each $mod, $dir in $positions {
        &--#{$name}-#{$mod} {
            $prop: $dir;
        }
    }
}

@include just-align（just，justify-content）;

并包含两次，一次用于对齐内容，一次用于对齐项目，但它似乎无法正常工作。

这是SASS无法做到的事情，还是我做错了什么？

Answer 1

你真的很接近，代码示例还没有完成，但如果我得到了你正在努力实现它的目的。您的$prop循环中应该$dir和#{$prop}看起来有#{$dir}和@each

基本上你必须对这些变量使用字符串插值（What does hash (#) sign do outside loops in SASS?）。

功能示例：

https://www.sassmeister.com/gist/459480125193d418702c9c64996bf89d

<强>然而...

justify-content和align-items的可用属性实际上是不同的，因此我不会采用这种方法。而是使用两个数组变量并将每个变量传递给mixin以获得正确的输出。

.flex {
  display: flex;

  $justify-positions: (
      start: flex-start,
      end: flex-end,
      center: center,
      around: space-around,
      between: space-between,
      evenly: space-evenly
  );
    $align-positions: (
      start: flex-start,
      end: flex-end,
      center: center,
      stretch: stretch,
      baseline: baseline
  );

  @mixin just-align($name,$prop,$arr) {
      @each $mod, $dir in $arr {
          &--#{$name}-#{$mod} {
              #{$prop}: #{$dir};
          }
      }
  }

  @include just-align('align','align-items', $align-positions);
  @include just-align('justify','justify-content', $justify-positions);
}

将编译为：

.flex {
  display: flex;
}
.flex--align-start {
  align-items: flex-start;
}
.flex--align-end {
  align-items: flex-end;
}
.flex--align-center {
  align-items: center;
}
.flex--align-stretch {
  align-items: stretch;
}
.flex--align-baseline {
  align-items: baseline;
}
.flex--justify-start {
  justify-content: flex-start;
}
.flex--justify-end {
  justify-content: flex-end;
}
.flex--justify-center {
  justify-content: center;
}
.flex--justify-around {
  justify-content: space-around;
}
.flex--justify-between {
  justify-content: space-between;
}
.flex--justify-evenly {
  justify-content: space-evenly;
}

使用SASS生成flexbox类

1 个答案: