mastastealth / sass-flex-mixin Goto Github PK
View Code? Open in Web Editor NEWFlexbox mixins
License: MIT License
Flexbox mixins
License: MIT License
Love this code! Thanks for sharing!
Quick question, but have you thought about setting default values for the mixins? For example:
// Flexbox "Flex" (shorthand)
// Values: <flex-grow> <flex-shrink> || <flex-basis>
// Default: 0 1 auto
@mixin flex($fg: 0, $fs: 1, $fb: auto) {
-webkit-box-flex: $fg;
-webkit-flex: $fg $fs $fb;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
By having the defaults defined for the mixin args, I was able to call like so:
.demoFlex{
@include flex(1);
background:#A9D1FE;
}
Whereas without the defaults, I get:
Syntax error: Mixin flex is missing argument $fs.
I'd be more than happy to do a PR if you think your code could benefit from default values. ๐
This isn't working in IE11. What is the fallback supposed to look like?
I'm not sure if this was intentionally so but I work on a website still with a significant number of FF 22- visitors, so we'd need to add display: -moz-box;
stuff to use this.
Will submit a pull request when I get around to it.
I really like your mixin collection, but I can't seem to get it to work in IE10. The mixin doesn't insert "display: -ms-flexbox" into the CSS, which means IE10 doesn't get it. When I hard code "display: -ms-flexbox" (without using the mixin) into an element's CSS, it works.
I'm using Compass 1.0.0.alpha.12 and Sass 3.4.2 .
why is -webkit-box-ordinal-group
(ln 132
) incremented the value by one, while the others don't?
I have webpack in Laravel 6
webpack.mix.js
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js');
mix.scripts([
'public/js/app.js',
'resources/js/includes/ral.js',
'resources/js/includes/script.js'
], 'public/js/app.js')
.sourceMaps()
.version();
mix.sass('resources/sass/app.scss', 'public/css');
Then I have bootstrap, slick-carousel and sass-flex-mixin installed in node_modules folder and I import them in my app.scss
app.scss
@import '~bootstrap/scss/bootstrap';
@import '~slick-carousel/slick/slick';
@import '~slick-carousel/slick/slick-theme';
@import '~sass-flex-mixin/flex';
@import 'variables';
@import 'includes/fontello';
@import 'style';
Then in _style.scss I have
.mystyleinc { @include flexbox; }
.mystyleext { @extend %flexbox; }
As I understand from tests.css both styles should be compiled into code below
.flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex; }
But I have different output. For mystyleinc I see only 3 of 5 properties. And mystyleext is absolutely empty.
.mystyleinc {
display: -webkit-box;
display: -moz-flex;
display: flex;
}
What is wrong?
I notice the names of files have changed somewhat, suggesting that a new bower release is needed to get the latest code
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
๐ดdisplay: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
๐ดdisplay: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
๐ด-moz-box-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
๐ด-moz-box-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
๐ด-moz-box-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: center;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
๐ด-moz-box-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
๐ด-moz-box-align: start;
๐ด-ms-grid-row-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
๐ด-moz-box-align: end;
๐ด-ms-grid-row-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
๐ด-moz-box-align: $value;
๐ด-ms-grid-row-align: $value;
}
-webkit-align-items: $value;
๐ด-moz-align-items: $value;
align-items: $value;
}
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
๐ด-ms-flex-wrap: nowrap;
} @else {
๐ด -ms-flex-wrap: $value;
}
flex-wrap: $value;
... instead of $value: row
: https://github.com/mastastealth/sass-flex-mixin/blob/master/flex.scss#L118.
This would be solved by #15 anyway.
It's an easy mistake to accidentally type out...
@include flex(1 0 auto);
But that doesn't actually work, as the mixin expects three separate parameters that must be comma separated. Like...
@include flex(1, 0, auto);
Is there a way to make Sass throw an error when commas are forgotten?
Latest on NPM is still at v1.0.0, lagging behind the repo a little
๐ป for the mixin!
Some usage examples would be very valuable. Thanks!
Here is my test-drive page for use with sass-flex-mixin
http://prettyminimal.com/flexbox/
After checking different browsers, it seem not to work properly on Internet Explorer 10 because it uses different flexbox properties.
From Microsoft's website:
https://msdn.microsoft.com/en-us/library/dn265027(v=vs.85).aspx
For Ie10 Use:
The -ms-flex-wrap property Instead of flex-wrap property
The -ms-flex-order and flex-order properties Instead of order property.
The -ms-flex-pack property Instead of justify-content property
The -ms-flex-align property Instead of align-items property
The -ms-flex-item-align property Instead of align-self property
The -ms-flex-line-pack property Instead of align-content property
Also there is an flexyboxes app, which generate proper code including IE10 http://the-echoplex.net/flexyboxes
[edit] I have checked scss flex mixins code and there are already -ms-flex- properties implemented, so now I don't know what's the reason of this issue.
Hi, the 1.0.1 release of this plugin isn't released to npm...
Can you please do this? If you can't do it can i upload it on my own bower repo for sass mixins (i'll add reference to your name, copyright and everything) because it's painful to download and insert manually from github into every new project :)
it looks like flex.scss
was renamed to _flexbox.scss
. This has broken our projects that are using webpack with sass-loader and doing
@import ~sass-flex-mixin/flex
The project-breaking happened spontaneously on our build server since version 1.0.2 is considered compatible with ^1.0.0
.
Thanks for these awesome mixins!
Hi,
Thank you for writing these mixins! I've found them very useful in my flexbox projects. I wondered if flex.scss should be named flex.scss to follow the SASS convention. I currently use bower to install the package and use bower-installer to rename the file with an underscore. It would be great if the file started with a "" by default.
Thoughts? Thanks again for the great set of mixins!
helped a bunch!
Current:
@mixin justify-content($value: flex-start) {
// ...
}
// Shorter version:
@mixin flex-just($value: flex-start) { @include justify-content($value); }
Why not:
@mixin justify-content($value: flex-start) {
// ...
}
// Shorter version:
@mixin flex-just($args...) { @include justify-content($args...); }
Thanks for your great work on the mixins!
Would you like to perhaps add a license
field to your bower.json
and/or a quick note to the README?
Many people just scan for the words "license" and "MIT" for example when picking projects. :)
I found this mixin file and while looking through it I noticed there was an error in the flex properties.
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
flex-wrap: none;
} @else {
flex-wrap: $value;
}
}
The flex-wrap
property has no value none
. With that said the mixin can be condensed to a one liner since you have a default set.
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
flex-wrap: $value;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.