Created
August 21, 2013 20:55
-
-
Save SteAllan/6300162 to your computer and use it in GitHub Desktop.
A little bit of SASS that lets you define a new breakpoint and will automatically generate a new grid for that breakpoint.
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
| // As used by Compass. | |
| // Used to calculate the em value for the media queries. | |
| // If you're not using ems for your media queries, why the hell not? | |
| $browser-default-font-size: 16px; | |
| // Define your breakpoints by supplying a name and a pixel value. Units will get stripped so you can add 'px' for clarity if you prefer. | |
| $breakpoints: false !default; | |
| $breakpoints: small 480px, medium 768, large 960; | |
| // Strip units from values so we can do maths and shit. | |
| @function strip-unit($num) { | |
| @return $num / ($num * 0 + 1); | |
| } | |
| // Loop through each defined breakpoint to generate our grids. | |
| @if $breakpoints { | |
| @each $breakpoint in $breakpoints { | |
| // Get the breakpoint details. | |
| $breakpoint-name: nth($breakpoint,1); | |
| $breakpoint-value: strip-unit(nth($breakpoint,2)) / strip-unit($browser-default-font-size); | |
| // Define your grid. | |
| @media (min-width: #{$breakpoint-value}em) { | |
| .grid-#{$breakpoint-name}-1of1 { | |
| width: 100%; | |
| } | |
| .grid-#{$breakpoint-name}-1of2 { | |
| width: 50%; | |
| } | |
| .grid-#{$breakpoint-name}-1of3 { | |
| width: 33.333%; | |
| } | |
| .grid-#{$breakpoint-name}-1of4 { | |
| width: 25%; | |
| } | |
| .grid-#{$breakpoint-name}-1of5 { | |
| width: 20%; | |
| } | |
| } | |
| }; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
All that funky stuff will compile to: