Skip to content

Instantly share code, notes, and snippets.

@una
Created October 6, 2014 14:16
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 una/53ca4981f91d01a40883 to your computer and use it in GitHub Desktop.
Save una/53ca4981f91d01a40883 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
$breakpoints: (
"(min-width: 400px)" "small",
"(min-width: 767px)" "med",
"(min-width: 1200px)" "large"
);
@mixin breakpoint($point) {
@each $breakpoint in $breakpoints {
$query: nth($breakpoint, 1);
$name: nth($breakpoint, 2);
@if ($name == $point) {
@media #{$query} { @content }
}
}
}
.small-example {
@include breakpoint(small) {
background: red;
}
}
.med-example {
@include breakpoint(med) {
background: yellow;
}
}
.large-example {
@include breakpoint(large) {
background: blue;
}
}
@media (min-width: 400px) {
.small-example {
background: red;
}
}
@media (min-width: 767px) {
.med-example {
background: yellow;
}
}
@media (min-width: 1200px) {
.large-example {
background: blue;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment