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

问题描述 投票:0回答:1

我正在使用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};
  }
}

我正在更新主题。我无法弄清楚如何使用这个mixin?在旧主题中,例如这部分:

#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

sass flexbox mixins
1个回答
0
投票

如你所见,我们有一系列mixins。

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

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

所以这:

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

输出:

#my-box {
  order: 2;
}

好吧,除非你只是想要一个视觉提示,order只涉及弹性项目,这并不能完全帮助你,因为你可以在SCSS中轻松完成order: 2

同样适用于mixins flex-alignflex-growflex-shrinkflex-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 */
}

Final example

在我删除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;
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.