How to use this Sass Flexbox mixin provided by a theme - sass

Question

I am using Drupal FortyTwo theme. In the FortyTwo base-theme there is a flexbox mixin provided see below:
#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};
}
}
I am updating the theme. I can't figure out how to use this mixin? In the old theme there is e.g. this part:
#my-block {
html.flexbox & {
#include flex;
#include bvp(flex-direction, column);
}
div.content {
html.flexbox & {
#include bvp(flex, 1);
}
position: relative;
}
}
Also I have to get rid of the bvp mixin. How do I add flexbox here the proper way using above flexbox mixins?

Answer 1

So as you saw, we have a series of mixins.
The last one should be be most helpful, but from playing around with it in Code Pen, I'm not convinced it actually works correctly. And some of the others aren't especially helpful.
For example, we can see that #mixin flex-order simply spits out the order flexbox property with whatever number we pass to it.
So this:
#my-box {
#include flex-order(2);
}
Outputs this:
#my-box {
order: 2;
}
Well unless you just want a visual reminder that order only relates to flex items, that's not exactly helping you much as you could have just as easily done order: 2 in your SCSS in the first place.
The same thing applies to the mixins flex-align, flex-grow, flex-shrink, and flex-child.
So being that the single-property mixins aren't super useful and the last mixin seems broken, I would recommend just specifying your flex properties as needed in your SCSS and maybe using the flex-flow mixin if you want.
#mixin flex-flow
The flex-flow flexbox property requires two values: one for flex wrapping, and one for flex direction. In the mixin, it outputs that shorthand property as two separate properties, or it outputs only the property you pass to it if you only pass one property, that way you don't end up with an invalid CSS rule.
So this:
#my-box {
#include flex-flow(wrap, column);
}
#my-other-box {
#include flex-flow(wrap);
}
Outputs this:
#my-box {
flex-wrap: wrap;
flex-direction: column;
}
#my-other-box {
flex-wrap: wrap;
}
That way you have two acceptable CSS rules. Otherwise if you actually used the flex-flow property, you'd get:
#my-box {
flex-flow: wrap column; /* invalid; flex-direction must come first */
}
#my-other-box {
flex-flow: wrap; /* invalid; missing flex-direction */
}
Final example
Your final SCSS could look something like this, after removing the bvp mixin and specifying the individual flex properties without mixins, as I initially recommended.
#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;
}
}