Skip to content

Instantly share code, notes, and snippets.

@havvg
Last active September 6, 2017 11:20
Show Gist options
  • Save havvg/728904ede96be35c09fb3af8f0438835 to your computer and use it in GitHub Desktop.
Save havvg/728904ede96be35c09fb3af8f0438835 to your computer and use it in GitHub Desktop.
SCSS Mixin to create any content responsive
// Based on Twitter Bootstrap Mixins
@mixin make-responsive($prefix, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@if $infix != "" {
@include media-breakpoint-down($breakpoint, $breakpoints) {
#{$prefix}#{$infix}-down {
@content;
}
}
@include media-breakpoint-only($breakpoint, $breakpoints) {
#{$prefix}#{$infix}-only {
@content;
}
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
#{$prefix}#{$infix}-up {
@content;
}
}
}
}
}
// Usage Example
// Generates classes according to breakpoints, e.g.
// .hide-md-down, .hide-md-only, .hide-md-up
@include make-responsive('.hide') {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment