Skip to content

Instantly share code, notes, and snippets.

@patik
Last active August 29, 2015 13:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save patik/9940131 to your computer and use it in GitHub Desktop.
Save patik/9940131 to your computer and use it in GitHub Desktop.
Breakpoint without Compass
@mixin breakpoint($size: "", $maxWidth: false) {
@if $size == "" {
$size: 20em; // Put your "main" or most-used breakpoint here to use it as a default
}
// Default, `min-width` media query
@if $maxWidth == false {
@media (min-width: $size) { @content; }
}
// Alternative `max-width` media query
@else {
@media (max-width: $size) { @content; }
}
}
.foo {
width: 100%;
}
@media (min-width: 10em) {
.foo {
width: 50%;
}
}
@media (min-width: 20em) {
.foo {
width: 25%;
}
}
@media (max-width: 5em) {
.foo {
float: left;
}
}
@import "_breakpoint";
.foo {
width: 100%;
// Standard usage
@include breakpoint(10em) {
width: 50%;
}
// Look ma, no parameters! (Quick and easy use for the most common breakpoint)
@include breakpoint {
width: 25%;
}
// Use a max-width media query instead
@include breakpoint(5em, true) {
float: left;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment