Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com, the Sass playground.
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
// To enable support for browsers that do not support @media queries,
// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
// Create a separate stylesheet served exclusively to these browsers,
// meaning @media queries will be rasterized, relying on the cascade itself
$mq-responsive: true !default;
// Name your breakpoints in a way that creates a ubiquitous language
// across team members. It will improve communication between
// stakeholders, designers, developers, and testers.
$mq-breakpoints: (
mobile: 320px,
tablet: 740px,
desktop: 980px,
wide: 1300px
) !default;
// Define the breakpoint from the $mq-breakpoints list that should
// be used as the target width when outputting a static stylesheet
// (i.e. when $mq-responsive is set to 'false').
$mq-static-breakpoint: desktop !default;
// If you want to display the currently active breakpoint in the top
// right corner of your site during development, add the breakpoints
// to this list, ordered by width, e.g. (mobile, tablet, desktop).
$mq-show-breakpoints: () !default;
@function mq-px2em($px, $base-font-size: 16px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return mq-px2em($px + 0px); // That may fail.
} @else if (unit($px) == em) {
@return $px;
}
@return ($px / $base-font-size) * 1em;
}
@function mq-get-breakpoint-width($name) {
@if(map-has-key($mq-breakpoints, $name)) {
@return map-get($mq-breakpoints, $name);
} @else {
@return 'Breakpoint #{$name} does not exist';
}
}
// Media Query mixin
// Usage:
// .element {
// @include mq($from: mobile) {
// color: red;
// }
// @include mq($to: tablet) {
// color: blue;
// }
// @include mq(mobile, tablet) {
// color: green;
// }
// @include mq($from: tablet, $and: '(orientation: landscape)') {
// color: teal;
// }
// @include mq(950px) {
// color: hotpink;
// }
// }
@mixin mq($from: false, $to: false, $and: false) {
// Initialize variables
$min-width: 0;
$max-width: 0;
$mediaQuery: '';
// From: this breakpoint (inclusive)
@if $from {
@if type-of($from) == number {
$min-width: mq-px2em($from);
} @else {
$min-width: mq-px2em(mq-get-breakpoint-width($from));
}
}
// To: that breakpoint (exclusive)
@if $to {
@if type-of($to) == number {
$max-width: mq-px2em($to);
} @else {
$max-width: mq-px2em(mq-get-breakpoint-width($to)) - .01em;
}
}
// Responsive support is disabled, rasterize the output outside @media blocks
// The browser will rely on the cascade itself.
@if ($mq-responsive == false) {
$static-breakpoint-width: mq-get-breakpoint-width($mq-static-breakpoint);
@if type-of($static-breakpoint-width) == number {
$target-width: mq-px2em($static-breakpoint-width);
// Output only rules that start at or span our target width
@if ($and == false and ($min-width <= $target-width) and (($to == false) or ($max-width >= $target-width))) {
@content;
}
} @else {
// Throw a warning if $mq-static-breakpoint is not in the $mq-breakpoints list
@warn "No static styles will be output: #{$static-breakpoint-width}";
}
}
// Responsive support is enabled, output rules inside @media queries
@else {
@if $min-width != 0 { $mediaQuery: '#{$mediaQuery} and (min-width: #{$min-width})'; }
@if $max-width != 0 { $mediaQuery: '#{$mediaQuery} and (max-width: #{$max-width})'; }
@if $and { $mediaQuery: '#{$mediaQuery} and #{$and}'; }
$mediaQuery: unquote(#{$mediaQuery});
@media all #{$mediaQuery} {
@content;
}
}
}
// Add a breakpoint
// Usage: $mq-breakpoints: mq-add-breakpoint(tvscreen, 1920px);
@function mq-add-breakpoint($name, $breakpoint) {
$new-breakpoint: (#{$name}: $breakpoint);
@return map-merge($mq-breakpoints, $new-breakpoint);
}
// Show the active breakpoint in the top right corner of the viewport
@if (length($mq-show-breakpoints) > 0) {
body:before {
background-color: #FCF8E3;
border-bottom: 1px solid #FBEED5;
border-left: 1px solid #FBEED5;
color: #C09853;
font: small-caption;
padding: 3px 6px;
position: absolute;
right: 0;
top: 0;
z-index: 100;
// Loop through the breakpoints that should be shown
@each $show-breakpoint in $mq-show-breakpoints {
$width: mq-get-breakpoint-width($show-breakpoint);
@include mq($show-breakpoint) {
content: "#{$show-breakpoint}#{$width} (#{mq-px2em($width)})";
}
}
}
}
/**
* Tests
* (scroll down to edit the tests)
*/
.element {
// Apply styling to devices at least as wide as a mobile
@include mq($from: mobile) {
color: green;
}
// Apply styling to devices at least as wide as a tablet
@include mq($from: tablet) {
color: blue;
}
// Apply styling to devices smaller than a "desktop"
@include mq($to: desktop) {
color: red;
}
@include mq($and: '(max-width: 400px), (min-width: 650px) and (max-width: 1200px)') {
color: crimson;
}
}
/**
* For older browsers that don't support @media queries
* (in our case: IE8)
*/
$mq-responsive: false;
$mq-static-breakpoint: desktop;
.element {
@include mq($from: mobile) {
color: green;
}
@include mq($from: tablet) {
color: blue;
}
@include mq($to: desktop) {
color: red; // Not wide enough: won't be in the output
}
@include mq(wide) {
color: crimson; // Too wide: won't be in the output
}
}
/**
* Tests
* (scroll down to edit the tests)
*/
@media all and (min-width: 20em) {
.element {
color: green;
}
}
@media all and (min-width: 46.25em) {
.element {
color: blue;
}
}
@media all and (max-width: 61.24em) {
.element {
color: red;
}
}
@media all and (max-width: 400px), (min-width: 650px) and (max-width: 1200px) {
.element {
color: crimson;
}
}
/**
* For older browsers that don't support @media queries
* (in our case: IE8)
*/
.element {
color: green;
color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment