Last active
September 4, 2020 06:48
-
-
Save dinoperovic/192678edcdcfd1e5202e64f0a6c781f1 to your computer and use it in GitHub Desktop.
Grid media sizes management in SASS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset 'UTF-8'; | |
| /// Grid media sizes management in SASS | |
| /// | |
| /// @example scss | |
| /// $grids: ( | |
| /// 'desktop': 1200px, | |
| /// 'large-desktop': 1800px, | |
| /// ); | |
| /// | |
| /// .element { | |
| /// @include grid('desktop') { | |
| /// // Desktop and up specific style | |
| /// } | |
| /// @include grid('large-desktop', $down: true) { | |
| /// // Large desktop and down specific style | |
| /// } | |
| /// @include grid('desktop', $to: 'large-desktop') { | |
| /// // Desktop and only desktop specific style | |
| /// } | |
| /// @include grid(200px, $to: 300px) { | |
| /// // Custom size query | |
| /// } | |
| /// } | |
| /// | |
| $grids: ('desktop': 1200px) !default; | |
| /// Return width of the given grid. | |
| @function grid-width($key, $grids: $grids) { | |
| @return map-get($grids, $key); | |
| } | |
| // Get the grid query for the given key or value. | |
| @function grid-query($key, $to: null, $down: false, $grids: $grids) { | |
| $width: if(type-of($key) == 'string', map-get($grids, $key), $key); | |
| $to-width: if(type-of($to) == 'string', grid-width($to), $to); | |
| $query: null; | |
| @if $down { | |
| $query: 'only screen and (max-width: #{$width - 1px})'; | |
| @if ($to) { $query: '#{$query} and (min-width: #{$to-width})'; } | |
| } @else { | |
| $query: 'only screen and (min-width: #{$width})'; | |
| @if ($to) { $query: '#{$query} and (max-width: #{$to-width - 1px})'; } | |
| } | |
| @return $query; | |
| } | |
| // Return @content in a grid. | |
| @mixin grid($key, $to: null, $down: false, $grids: $grids) { | |
| $query: grid-query($key, $to, $down, $grids); | |
| @media #{$query} { @content; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment