@mixin 中的 SCSS 相对值

Question

我想在 SCSS 中使用 classes 编写简短的 flex 规则。我想写一个一次性 justify-content class 块并使用 @mixin 以便将它插入到 flex 选项中。

我如何（如果可能）在 @mixin 中编写一个相对变量来表示包含 @mixin 的父 class？

.row {
  display: flex;
  flex-direction: row;
  @include justification;
}

.column {
display: flex;
  flex-direction: column;
  @include justification;
}

@mixin justification {
  &-center {
    @extend {parent};
    justify-content: center;
  }
  &-start {
    @extend {parent};
    justify-content: start;
  }
}

代替 {parent} 的是什么，其中 'parent' 表示包含此 mixin 的 class？

Answer 1

我认为你应该制作一个如下所示的 mixin 并在其中提供默认值。

@mixin flex-properties($flex:flex, $justify-content: center, $align-items: center) {
  display: $flex;
  justify-content: $justify-content;
  align-items: $align-items;
}

要使用上面的 mixin & 你也可以更改其参数的默认值:-

.some-class {
  @include flex-properties(flex, space-between, center);
}

Answer 2

是的！我做到了！

答案的关键是将包含程序的 class 名称作为参数传递给 @mixin。像这样：

.row {
  display: flex;
  flex-direction: row;
  @include justification(&);
}

.column {
display: flex;
  flex-direction: column;
  @include justification(&);
}

@mixin justification($class) {
  &-center {
    @extend #{$class};
    justify-content: center;
  }
  &-start {
    @extend #{$class};
    justify-content: start;
  }
}

有效

@mixin 中的 SCSS 相对值

SCSS relative value in @mixin

sass

scss-mixins