Skip to content

Instantly share code, notes, and snippets.

@paulozoom
Last active August 29, 2015 14:19
Show Gist options
  • Save paulozoom/a75f4f7970cce9695e94 to your computer and use it in GitHub Desktop.
Save paulozoom/a75f4f7970cce9695e94 to your computer and use it in GitHub Desktop.
Custom SCSS Mixins for Responsive CSS Modules
// Breakpoints
$bps: (
s: 400px,
m: 568px,
l: 780px,
xl: 1025px
);
// Mobile-first media query
@mixin media-from($start) {
@media screen and (min-width: $start) {
@content;
}
}
// Modify declarations for each breakpoint
@mixin per-bp($base: true) {
// Non-modified declaration?
@if $base { @content; }
// Per-breakpoint modifier
@each $bp, $size in $bps {
&--#{$bp} {
@include media-from($bp) {
@content;
}
}
}
}
.u-show {
@include per-bp {
display: block;
}
}
.u-show { display: block; }
@media screen and (min-width: 400px) { .u-show--s { display: block; } }
@media screen and (min-width: 568px) { .u-show--m { display: block; } }
@media screen and (min-width: 780px) { .u-show--l { display: block; } }
@media screen and (min-width: 1025px) { .u-show--xl { display: block; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment