Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
27,930 Points

Flexbox Prefix Mixins Partial :)

Hi everyone!

Just thought id throw this out there, I spent a while putting this together and it has come in very handy as a nice little partial .scss file rather than running autoprefixer(not that autoprefixer is bad! This is just another option)

I know Sass library's like compass have something similar but I haven't used compass and like how this just sits in a partial waiting to let you flex up your sites :)

GitHub Repo for Flexbox Prefix Mixins

There is no readme.txt but its quite simple, just pass the name of the css property asthe mixin name and the value as the argument. 30 secs reading over the code and you'll get the gist.

All the mixin names if not by default from flexbox, start with flex as you will see to avoid any silly conflicts that could have happened and if the value should need two arguments they need to be comma separated.

CodePen Working Version

Below are the mixins used as includes to show examples:

// Wrapper Properties and Values
//******************************************************

/* Display Flex */
.flex-wrapper {
    @include displayFlex;
}
/* Flex Direction */
.flex-wrapper {
    @include flexDirection(row);
}
/* Flex Wrap */
.flex-wrapper {
    @include flexWrap(wrap);
}
/* Flex Flow */
.flex-wrapper {
    @include flexFlow(row, wrap-reverse);
}
/* Justify Content */
.flex-wrapper {
    @include flexJustifyContent(space-around);
}
/* Align Items */
.flex-wrapper {
    @include flexAlignItems(center);
}
/* Align Content */
.flex-wrapper {
    @include flexAlignContent(baseline);
}

// Item Properties and Values
//******************************************************

/* Order */
.flex-item {
    @include flexOrder(1);
}
/* Flex Grow */
.flex-item {
    @include flexGrow(1);
}
/* Flex Shrink */
.flex-item {
    @include flexShrink(1);
}
/* Flex Basis */
.flex-item {
    @include flexBasis(auto);
}
/* Align Self */
.flex-item {
    @include flexAlignSelf(center);
}
/* Flex Item Shorthand */
.flex-item {
    @include flex(0, 1, auto);
}

Anyway if you have any questions, suggestions or find this totaly useless please let me know im still learning and like to get feedback on the things that keep me busy :)

Craig

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Nice! One thing I thought of though, aren't you meant to prefix partials with an underscore? Or is that old school and I haven't used them in forever...?

Craig Watson
Craig Watson
27,930 Points

Iain, you are absolutely right!

I had brought the code down from codepen and into sublime and not thinking just saved the file... oops.

I will be sure to get that rectified ASAP :)

Craig