Skip to content

Instantly share code, notes, and snippets.

@lukephills
Forked from anthonyshort/_media-queries.scss
Last active August 29, 2015 14:07
Show Gist options
  • Save lukephills/0d6d15cc4d0ab78abe32 to your computer and use it in GitHub Desktop.
Save lukephills/0d6d15cc4d0ab78abe32 to your computer and use it in GitHub Desktop.
/**
* Bootstrap responsive breakpoints mixins
*
*/
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
@mixin xxs {
@media only screen and ( max-width: $screen-xs ) {
@content;
}
}
@mixin xs {
@media only screen and ( min-width: $screen-xs ) {
@content;
}
}
@mixin sm {
@media only screen and ( min-width: $screen-sm ) {
@content;
}
}
@mixin md {
@media only screen and ( min-width: $screen-md ) {
@content;
}
}
@mixin lg {
@media only screen and ( min-width: $screen-lg ) {
@content;
}
}
------------ USAGE ------------
h1 {
font-size: 28px;
@include sm {
font-size: 34px;
}
@include lg {
font-size: 48px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment