@mixin flex-flow

Question

我正在使用Drupal FortyTwo theme.在FortyTwo基本主题中，提供了flexbox mixin，见下文：

@mixin flex-order($number) {
  order: #{$number};
}

@mixin flex-align($align) {
  @if $align == 'start' or $align == 'end' {
    align-items: flex-#{$align};
  } @else {
    align-items: #{$align};
  }
}

@mixin flex-flow($direction: none, $wrap: none) {
  @if $wrap != none {
    flex-wrap: #{$wrap};
  }
  @if $direction != none {
    flex-direction: #{$direction};
  }
}

@mixin flex-grow($value) {
  flex-grow: #{$value};
}

@mixin flex-shrink($value) {
  flex-shrink: #{$value};
}

@mixin flex-child($value) {
  flex: #{$value};
}

@mixin flex($wrap: none, $justify: none, $align: none, $flow: none, $direction: none, $inline: none) {
  @if $inline != none {
    display: inline-flex;
  } @else {
    display: flex;
  }
  @if $direction != none {
    flex-direction: #{$direction};
  }
  @if $wrap != none {
    flex-wrap: #{$wrap};
  }
  @if $align != none {
    align-items: #{$align};
  }
  @if $justify != none {
    justify-content: #{$justify};
  }
}

我正在更新主题。我无法弄清楚如何使用这个混音？在旧主题中，例如这部分：

#my-block {
  html.flexbox & {
    @include flex;
    @include bvp(flex-direction, column);
  }
  div.content {
    html.flexbox & {
      @include bvp(flex, 1);
    }
    position: relative;
  }
}

此外，我必须摆脱bvp mixin。如何使用上述flexbox mixins以正确的方式添加flexbox？

Answer 1

如你所见，我们有一系列混音。

最后一个应该最有帮助，但是在Code Pen中使用它，我不相信它实际上是正常的。其他一些人并没有特别的帮助。

例如，我们可以看到@mixin flex-order只是将order flexbox属性用我们传递给它的任何数字吐出。

所以这个：

#my-box {
  @include flex-order(2);
}

输出：

#my-box {
  order: 2;
}

除非您只是想要order仅与灵活项目相关的视觉提醒，否则这并不能完全帮助您，因为您可以在SCSS中轻松完成order: 2。

同样适用于mixins flex-align，flex-grow，flex-shrink和flex-child。

因此，单一属性mixins不是非常有用，而且最后的mixin似乎已经破解，我建议您只需在SCSS中根据需要指定flex属性，如果需要，可以使用flex-flow mixin。

@mixin flex-flow

flex-flow flexbox属性需要两个值：一个用于flex包装，另一个用于flex方向。在mixin中，它将该速记属性输出为两个单独的属性，或者如果只传递一个属性，则仅输出传递给它的属性，这样就不会产生无效的CSS规则。

所以这个：

#my-box {
  @include flex-flow(wrap, column);
}
#my-other-box {
  @include flex-flow(wrap);
}

输出：

#my-box {
  flex-wrap: wrap;
  flex-direction: column;
}
#my-other-box {
  flex-wrap: wrap;
}

这样你有两个可接受的CSS规则。否则，如果您实际使用了flex-flow属性，则会得到：

#my-box {
  flex-flow: wrap column; /* invalid; flex-direction must come first */
}
#my-other-box {
  flex-flow: wrap; /* invalid; missing flex-direction */
}

最后的例子

在我删除bvp mixin并指定没有mixins的各个flex属性之后，你的最终SCSS可能看起来像这样，就像我最初推荐的那样。

#my-block {
  html.flexbox & {
    @include flex-flow(row, wrap);
    align-items: center;
    justify-content: center;
  }
  div.content {
    html.flexbox & {
      flex: 1 0 auto;          
    }
    position: relative;
  }
}

如何使用主题提供的这个Sass Flexbox mixin

1 个答案:

@mixin flex-flow

最后的例子