Skip to content

Instantly share code, notes, and snippets.

@tsvensen
Last active December 16, 2015 17:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsvensen/5474542 to your computer and use it in GitHub Desktop.
Save tsvensen/5474542 to your computer and use it in GitHub Desktop.
Using Media Queries in Sass with ESRG's Sass Grid Generator (https://github.com/dfcb/extra-strength-responsive-grids)
// Using media queries in Sass with ESRG Grid Generator (https://github.com/dfcb/extra-strength-responsive-grids)
@import 'grid.generator.scss' // (https://github.com/dfcb/extra-strength-responsive-grids/blob/master/css/_grid.generator.scss)
// Media query mixin used below (should live in another file)
@mixin mq($media_query) {
@media ($media_query) { @content; }
}
// set breakpoints
$s-breakpoint: 0;
$m-breakpoint: 35em;
$l-breakpoint: 55em;
// build media queries
$S: 'min-width:'+ $s-breakpoint;
$M: 'min-width:'+ $m-breakpoint;
$L: 'min-width:'+ $l-breakpoint;
// generate the grid
@include gridGenerator(
($s-breakpoint, $m-breakpoint, $l-breakpoint), // breakpoints
'em' // breakpoint type 'px' or 'em'
);
// ...and use the media query variables (see mixin definition above)
body {
text-decoration: underline;
@include mq($L) {
text-decoration: blink;
}
}
@davatron5000
Copy link

Looks alright to me. I don't do use gridGenerators, but that looks like a good way to approach that.

@tsvensen
Copy link
Author

Thanks @davatron5000, appreciate the feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment