Media Query Mixin #94
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* | ||
| * Media Query Mixin | ||
| * Containes logic to easily remove media queries for | ||
| * desktop only or mobile only projects | ||
| * Examples: | ||
| * 1. @include mq( 300px ) { } (min-width) | ||
| * 2. @include mq( $max: 300px ) { } (max-width) | ||
| * 3. @include mq( 400px, 800px ) { } (both min + max-width) | ||
| */ | ||
| $media-queries: true; | ||
| $desktop-styles: true; | ||
|
|
||
| @mixin mq($min: null, $max: null) { | ||
| @if $min == null and $max == null { | ||
| @error "Please provide a value for $min and/or $max"; | ||
| } | ||
|
|
||
| @if $media-queries { | ||
| @if $min != null and $max != null { | ||
| @media (min-width: $min) and (max-width: $max) { | ||
| @content; | ||
| } | ||
| } | ||
| @else if $min != null { | ||
| @media (min-width: $min) { | ||
| @content; | ||
| } | ||
| } | ||
| @else { | ||
| @media (max-width: $max) { | ||
| @content; | ||
| } | ||
| } | ||
| } | ||
| @else if $desktop-styles and $max == null { | ||
| /* Content printed with no media query for desktop project */ | ||
| @content; | ||
| } | ||
| @else if $desktop-styles == false and $min == null { | ||
|
There was a problem hiding this comment. so say we have a max value passed and $desktop-styles is set to true? nothing happens ? So queries without a max value are considered as desktop styles if I am not wrong? There was a problem hiding this comment. Yes the idea behind the $desktop-styles variable is to only be used if $media-queries is set to false. This way the code knows if it should print out styles based on styles targeted to large screens vs small screens. As for a third parameter I'm having a hard time imagining what that would be. I imagine the goal of the third parameter is to ensure the user is getting all the styles they need. When writing the code initially I was thinking the lowest size screen styles would be "mobile" while highest would be "desktop" but I can see a point where that might not be the case. While pondering this question it did make me think of an idea (sorry if this is what you were saying and I totally misunderstood) maybe we should remove the $desktop-style variable and replace it with a variable called $app-size (or something like that) that takes a pixel size that defines the screen size the user wishes to support without media queries. For example if I was making an iPad app I would pass 1024px to the variable (iPad landscape). Then when styles are evaluated through the mixin we could check if the min/max width fits the size to determine if it should be printed or not. Please let me know if this didn't address your question but I do really like this idea and if others are on board with it I will add it to the mixin. Thanks for reviewing! There was a problem hiding this comment. My issue was what you guessed, instead of assuming based on the presence of min or max, we could let the developer specify it somehow,and the solution you mentioned saves the developer pains to add a third param and think about it, plus gives us the control. That is a good idea. Let two vars specify min and max size of the app itself if its not responsive. Any styles that don't fit in can be totally ignored by your mixin. 👍 to that.!! @sfrisk what do you think of @kristyjy's idea. ? |
||
| /* Content printed with no media query for mobile project */ | ||
| @content; | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These variables should probably go into a separate files for themeroller use.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the location of variable files will change based on jsass-vars #89 PR. But they will certainly be in a separate file