Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Media Queries Structure - Zurb Founation Base
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----
//
// Article Info(Fun Part):
//
@mixin person($who) {
#{$who}-name: "Parhum Khoshbakht";
#{$who}-url: "http://parhum.net";
#{$who}-twitter: "@parhumm";
}
%article__info {
article-title: "Sass Media Queries Structure";
article-url: "http://parhum.net/blog/rwd/sass-media-queries-structure/";
@include person(author);
}
//
// 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
//
// Media Query Ranges
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);
// Media Query Expressions
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
//
// Mixin
//
@mixin breakpoint($point) {
@if $point == small {
@media #{$small-only} { @content; }
}
@else if $point == small-up {
@media #{$small-up} { @content; }
}
@else if $point == medium {
@media #{$medium-only} { @content; }
}
@else if $point == medium-up {
@media #{$medium-up} { @content; }
}
@else if $point == large {
@media #{$large-only} { @content; }
}
@else if $point == large-up {
@media #{$large-up} { @content; }
}
@else if $point == xlarge {
@media #{$xlarge-only} { @content; }
}
@else if $point == xlarge-up {
@media #{$xlarge-up} { @content; }
}
@else if $point == xxlarge {
@media #{$xxlarge-only} { @content; }
}
@else if $point == xxlarge-up {
@media #{$xxlarge-up} { @content; }
}
@else {
@warn "This breakpoint '#{$point}' doesn't exist!";
}
}
//
// Styles
//
#nav {
background: #eee;
@include breakpoint(small) {
li {
display: block;
margin-right: 0;
}
}
@include breakpoint(medium-up) {
ul {
float: left;
width: 80%;
}
li {
display: inline-block;
margin-right: 1rem;
}
}
}
#nav {
background: #eee;
}
@media only screen and (max-width: 40em) {
#nav li {
display: block;
margin-right: 0;
}
}
@media only screen and (min-width: 40.063em) {
#nav ul {
float: left;
width: 80%;
}
#nav li {
display: inline-block;
margin-right: 1rem;
}
}
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.