Skip to content

Instantly share code, notes, and snippets.

@jensgro
Last active August 29, 2015 13:56
Show Gist options
  • Save jensgro/8957166 to your computer and use it in GitHub Desktop.
Save jensgro/8957166 to your computer and use it in GitHub Desktop.
Sass-mixin for mediaqueries
// $bp-min: 300px;
//
// .test {
// color: red;
// @include mq(min, $bp-min){
// color: blue;
// }
// }
// -----------------------------------
// .test2 {
// color: red;
// @include mq(min, 300px){
// color: blue;
// }
// }
// -----------------------------------
// .test3 {
// color: red;
// @include mq(min-max, 400px, 800px) {
// color: blue;
// }
// }
.test1 {
@include mq(min, 400px){
color: #000;
}
}
.test2 {
@include mq(max, 800px) {
color: red;
}
}
@mixin mq($dimension, $breakpoint, $breakpoint2:false) {
@if $dimension == min {
@media screen and (min-width: $breakpoint) {
@content;
}
} @else if $dimension == max {
@media screen and (max-width: $breakpoint) {
@content;
}
} @else if $dimension == min-max {
@media screen and (min-width: $breakpoint) and (max-width: $breakpoint2) {
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment