Skip to content

Instantly share code, notes, and snippets.

@mikestreety
Created November 13, 2014 15:45
Show Gist options
  • Save mikestreety/5ac6586551dcd485ac61 to your computer and use it in GitHub Desktop.
Save mikestreety/5ac6586551dcd485ac61 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1>What would you do if i sang out of tune?</h1>
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
$mq-static-breakpoint: desktop !default;
$mq-responsive: true !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 {
@warn "Breakpoint #{$name} does not exist";
}
}
// Media Query mixin
// Usage:
// .element {
// @include mq($from: mobile) {
// color: red;
// }
// @include mq($until: 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, $until: false, $and: false, $to: null) {
// Deprecate use of $to for $until, because $until implies the exclusive
// boundary that is in place, whereas $to is unclear.
@if $to {
@if not $until {
@warn '$to is deprecated, you should use $until instead';
$until: $to;
} @else {
@warn 'You are using $until and $to together. $to is deprecated and has been ignored. You should remove it.';
}
}
// 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));
}
}
// Until: that breakpoint (exclusive)
@if $until {
@if type-of($until) == number {
$max-width: mq-px2em($until);
} @else {
$max-width: mq-px2em(mq-get-breakpoint-width($until)) - .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 (($until == 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;
}
}
}
@mixin propValue($map) {
@each $prop, $value in $map {
#{$prop}: #{$value};
}
}
@mixin typography($element) {
$map: map-get($typography, $element);
$base: map-get($map, base);
@include propValue($base);
$mq: map-remove($map, base);
@each $bp, $attr in $mq {
@include mq($bp) {
@include propValue($attr);
}
}
}
$mq-breakpoints: (
micro: 30em,
tablet: 45em,
laptop: 50em,
desktop: 65em,
jumbo: 112em
);
$typography: (
h1: (
base: (
font-size: 1.3em,
line-height: 1.1
),
tablet: (
font-size: 1.8em
),
laptop: (
margin-bottom: 2em
)
)
);
h1 {
@include typography(h1);
}
h1 {
font-size: 1.3em;
line-height: 1.1;
}
@media all and (min-width: 45em) {
h1 {
font-size: 1.8em;
}
}
@media all and (min-width: 50em) {
h1 {
margin-bottom: 2em;
}
}
<h1>What would you do if i sang out of tune?</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment