Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Media Queries Structure - Bootstrap Base: http://sassmeister.com/gist/52e69977e3278a4d409a
//
// Functions
//
// RANGES
// We use these functions to define ranges for various things, like media queries.
@function lower-bound($range){
@if length($range) <= 0 {
@return 0;
}
@return nth($range,1);
}
@function upper-bound($range) {
@if length($range) < 2 {
@return 999999999999;
}
@return nth($range, 2);
}
//
// Settings
//
// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs: 480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min: $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone: $screen-xs-min !default;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
// Media Query Ranges
$screen-xs-range: ($screen-xs-min, $screen-xs-max);
$screen-sm-range: ($screen-sm-min, $screen-sm-max);
$screen-md-range: ($screen-md-min, $screen-md-max);
$screen-lg-range: ($screen-lg-min, 999999999px);
// Media Query Expressions
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
$screen-xs-up: $screen;
$screen-xs-only: "#{$screen} and (max-width: #{upper-bound($screen-xs-range)})";
$screen-sm-up: "#{$screen} and (min-width:#{lower-bound($screen-sm-range)})";
$screen-sm-only: "#{$screen} and (min-width:#{lower-bound($screen-sm-range)}) and (max-width:#{upper-bound($screen-sm-range)})";
$screen-md-up: "#{$screen} and (min-width:#{lower-bound($screen-md-range)})";
$screen-md-only: "#{$screen} and (min-width:#{lower-bound($screen-md-range)}) and (max-width:#{upper-bound($screen-md-range)})";
$screen-lg-up: "#{$screen} and (min-width:#{lower-bound($screen-lg-range)})";
$screen-lg-only: $screen-lg-up;
//
// Mixin
//
@mixin breakpoint($point) {
@if $point == xs {
@media #{$screen-xs-only} { @content; }
}
@else if $point == xs-up {
@content;
}
@else if $point == sm {
@media #{$screen-sm-only} { @content; }
}
@else if $point == sm-up {
@media #{$screen-sm-up} { @content; }
}
@else if $point == md {
@media #{$screen-md-only} { @content; }
}
@else if $point == md-up {
@media #{$screen-md-up} { @content; }
}
@else if $point == lg {
@media #{$screen-lg-only} { @content; }
}
@else if $point == lg-up {
@media #{$screen-lg-up} { @content; }
}
@else {
@warn "This breakpoint '#{$point}' doesn't exist!";
}
}
//
// Styles
//
#nav {
background: #eee;
@include breakpoint(xs-up) {
li {
display: block;
margin-right: 0;
}
}
@include breakpoint(sm-up) {
ul {
float: left;
width: 80%;
}
li {
display: inline-block;
margin-right: 1rem;
}
}
@include breakpoint(sm) {
ul {
float: left;
width: 80%;
}
li {
display: inline-block;
margin-right: 1rem;
}
}
@include breakpoint(md) {
h1 {
font-size: 50px;
}
}
@include breakpoint(lg-up) {
h1 {
font-size: 50px;
}
}
}
#nav {
background: #eee;
}
#nav li {
display: block;
margin-right: 0;
}
@media only screen and (min-width: 768px) {
#nav ul {
float: left;
width: 80%;
}
#nav li {
display: inline-block;
margin-right: 1rem;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#nav ul {
float: left;
width: 80%;
}
#nav li {
display: inline-block;
margin-right: 1rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#nav h1 {
font-size: 50px;
}
}
@media only screen and (min-width: 1200px) {
#nav h1 {
font-size: 50px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.