Created
June 3, 2015 13:48
-
-
Save eduardoboucas/2e2b68362c50223274fe to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.2.4) | |
// ---- | |
// _ _ _ _ _ | |
// (_) | | | | | (_) | |
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _ | |
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` | | |
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| | | |
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_| | |
// | |
// Simple, elegant and maintainable media queries in Sass | |
// | |
// http://include-media.com | |
// | |
// Author: Eduardo Boucas <mail@eduardoboucas.com> | |
// | |
//// | |
/// include-media library public configuration | |
/// @author Eduardo Boucas | |
/// @access public | |
//// | |
/// | |
/// Creates a list of global breakpoints | |
/// | |
/// @example scss - Creates a single breakpoint with the label `phone` | |
/// $breakpoints: ('phone': 320px); | |
/// | |
$breakpoints: ( | |
'phone': 320px, | |
'tablet': 768px, | |
'desktop': 1024px | |
) !default; | |
/// | |
/// Creates a list of static expressions or media types | |
/// | |
/// @example scss - Creates a single media type (screen) | |
/// $media-expressions: ('screen': 'screen'); | |
/// | |
/// @example scss - Creates a static expression with logical disjunction (OR operator) | |
/// $media-expressions: ( | |
/// 'retina2x': ( | |
/// '(-webkit-min-device-pixel-ratio: 2)', | |
/// '(min-resolution: 192dpi)' | |
/// ) | |
/// ); | |
/// | |
$media-expressions: ( | |
'screen': 'screen', | |
'print': 'print', | |
'handheld': 'handheld', | |
'landscape': '(orientation: landscape)', | |
'portrait': '(orientation: portrait)', | |
'retina2x': ( | |
'(-webkit-min-device-pixel-ratio: 2)', | |
'(min-resolution: 192dpi)' | |
), | |
'retina3x': ( | |
'(-webkit-min-device-pixel-ratio: 3)', | |
'(min-resolution: 350dpi)' | |
) | |
) !default; | |
/// | |
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals | |
/// | |
/// @example scss - Interval for pixels is defined as `1` by default | |
/// @include media(">128px") {} | |
/// | |
/// /* Generates: */ | |
/// @media (min-width: 129px) {} | |
/// | |
/// @example scss - Interval for ems is defined as `0.01` by default | |
/// @include media(">20em") {} | |
/// | |
/// /* Generates: */ | |
/// @media (min-width: 20.01em) {} | |
/// | |
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` | |
/// @include media(">2.0rem") {} | |
/// | |
/// /* Generates: */ | |
/// @media (min-width: 2.1rem) {} | |
/// | |
$unit-intervals: ( | |
'px': 1, | |
'em': 0.01, | |
'rem': 0.1 | |
) !default; | |
//// | |
/// Cross-engine logging engine | |
/// @author Hugo Giraudel | |
/// @access private | |
//// | |
/// | |
/// Log a message either with `@error` if supported | |
/// else with `@warn`, using `function-exists('at-error')` | |
/// to detect support. | |
/// | |
/// @param {String} $message - Message to log | |
/// | |
@function log($message) { | |
@if function-exists('at-error') { | |
@error $message; | |
} @else { | |
@warn $message; | |
$_: noop(); | |
} | |
@return $message; | |
} | |
/// | |
/// Wrapper mixin for the log function so it can be used with a more friendly | |
/// API than `@if log('..') {}` or `$_: log('..')`. Basically, use the function | |
/// within functions because it is not possible to include a mixin in a function | |
/// and use the mixin everywhere else because it's much more elegant. | |
/// | |
/// @param {String} $message - Message to log | |
/// | |
@mixin log($message) { | |
@if log($message) {} | |
} | |
/// | |
/// Function with no `@return` called next to `@warn` in Sass 3.3 | |
/// to trigger a compiling error and stop the process. | |
/// | |
@function noop() {} | |
//// | |
/// Parsing engine | |
/// @author Hugo Giraudel | |
/// @access private | |
//// | |
/// | |
/// Get operator of an expression | |
/// | |
/// @param {String} $expression - Expression to extract operator from | |
/// | |
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤` | |
/// | |
@function get-expression-operator($expression) { | |
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') { | |
@if str-index($expression, $operator) { | |
@return $operator; | |
} | |
} | |
// It is not possible to include a mixin inside a function, so we have to | |
// rely on the `log(..)` function rather than the `log(..)` mixin. Because | |
// functions cannot be called anywhere in Sass, we need to hack the call in | |
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with | |
// Sass 3.3, change this line in `@if log(..) {}` instead. | |
$_: log('No operator found in `#{$expression}`.'); | |
} | |
/// | |
/// Get dimension of an expression, based on a found operator | |
/// | |
/// @param {String} $expression - Expression to extract dimension from | |
/// @param {String} $operator - Operator from `$expression` | |
/// | |
/// @return {String} - `width` or `height` (or potentially anything else) | |
/// | |
@function get-expression-dimension($expression, $operator) { | |
$operator-index: str-index($expression, $operator); | |
$parsed-dimension: str-slice($expression, 0, $operator-index - 1); | |
$dimension: 'width'; | |
@if str-length($parsed-dimension) > 0 { | |
$dimension: $parsed-dimension; | |
} | |
@return $dimension; | |
} | |
/// | |
/// Get dimension prefix based on an operator | |
/// | |
/// @param {String} $operator - Operator | |
/// | |
/// @return {String} - `min` or `max` | |
/// | |
@function get-expression-prefix($operator) { | |
@return if(index(('<', '<=', '≤'), $operator), 'max', 'min'); | |
} | |
/// | |
/// Get value of an expression, based on a found operator | |
/// | |
/// @param {String} $expression - Expression to extract value from | |
/// @param {String} $operator - Operator from `$expression` | |
/// | |
/// @return {Number} - A numeric value | |
/// | |
@function get-expression-value($expression, $operator) { | |
$operator-index: str-index($expression, $operator); | |
$value: str-slice($expression, $operator-index + str-length($operator)); | |
@if map-has-key($breakpoints, $value) { | |
$value: map-get($breakpoints, $value); | |
} @else { | |
$value: to-number($value); | |
} | |
$interval: map-get($unit-intervals, unit($value)); | |
@if not $interval { | |
// It is not possible to include a mixin inside a function, so we have to | |
// rely on the `log(..)` function rather than the `log(..)` mixin. Because | |
// functions cannot be called anywhere in Sass, we need to hack the call in | |
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with | |
// Sass 3.3, change this line in `@if log(..) {}` instead. | |
$_: log('Unknown unit `#{unit($value)}`.'); | |
} | |
@if $operator == '>' { | |
$value: $value + $interval; | |
} @else if $operator == '<' { | |
$value: $value - $interval; | |
} | |
@return $value; | |
} | |
/// | |
/// Parse an expression to return a valid media-query expression | |
/// | |
/// @param {String} $expression - Expression to parse | |
/// | |
/// @return {String} - Valid media query | |
/// | |
@function parse-expression($expression) { | |
// If it is part of $media-expressions, it has no operator | |
// then there is no need to go any further, just return the value | |
@if map-has-key($media-expressions, $expression) { | |
@return map-get($media-expressions, $expression); | |
} | |
$operator: get-expression-operator($expression); | |
$dimension: get-expression-dimension($expression, $operator); | |
$prefix: get-expression-prefix($operator); | |
$value: get-expression-value($expression, $operator); | |
@return '(#{$prefix}-#{$dimension}: #{$value})'; | |
} | |
/// | |
/// Slice `$list` between `$start` and `$end` indexes | |
/// | |
/// @access private | |
/// | |
/// @param {List} $list - List to slice | |
/// @param {Number} $start [1] - Start index | |
/// @param {Number} $end [length($list)] - End index | |
/// | |
/// @return {List} Sliced list | |
/// | |
@function slice($list, $start: 1, $end: length($list)) { | |
@if length($list) < 1 or $start > $end { | |
@return (); | |
} | |
$result: (); | |
@for $i from $start through $end { | |
$result: append($result, nth($list, $i)); | |
} | |
@return $result; | |
} | |
//// | |
/// String to number converter | |
/// @author Hugo Giraudel | |
/// @access private | |
//// | |
/// | |
/// Casts a string into a number | |
/// | |
/// @param {String | Number} $value - Value to be parsed | |
/// | |
/// @return {Number} | |
/// | |
@function to-number($value) { | |
@if type-of($value) == 'number' { | |
@return $value; | |
} @else if type-of($value) != 'string' { | |
$_: log('Value for `to-number` should be a number or a string.'); | |
} | |
$result: 0; | |
$digits: 0; | |
$minus: str-slice($value, 1, 1) == '-'; | |
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); | |
@for $i from if($minus, 2, 1) through str-length($value) { | |
$character: str-slice($value, $i, $i); | |
@if not (index(map-keys($numbers), $character) or $character == '.') { | |
@return to-length(if($minus, -$result, $result), str-slice($value, $i)) | |
} | |
@if $character == '.' { | |
$digits: 1; | |
} @else if $digits == 0 { | |
$result: $result * 10 + map-get($numbers, $character); | |
} @else { | |
$digits: $digits * 10; | |
$result: $result + map-get($numbers, $character) / $digits; | |
} | |
} | |
@return if($minus, -$result, $result);; | |
} | |
/// | |
/// Add `$unit` to `$value` | |
/// | |
/// @param {Number} $value - Value to add unit to | |
/// @param {String} $unit - String representation of the unit | |
/// | |
/// @return {Number} - `$value` expressed in `$unit` | |
/// | |
@function to-length($value, $unit) { | |
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); | |
@if not index(map-keys($units), $unit) { | |
$_: log('Invalid unit `#{$unit}`.'); | |
} | |
@return $value * map-get($units, $unit); | |
} | |
//// | |
/// include-media public exposed API | |
/// @author Eduardo Boucas | |
/// @access public | |
//// | |
/// | |
/// Generates a media query based on a list of conditions | |
/// | |
/// @param {Arglist} $conditions - Media query conditions | |
/// | |
/// @example scss - With a single set breakpoint | |
/// @include media(">phone") { } | |
/// | |
/// @example scss - With two set breakpoints | |
/// @include media(">phone", "<=tablet") { } | |
/// | |
/// @example scss - With custom values | |
/// @include media(">=358px", "<850px") { } | |
/// | |
/// @example scss - With set breakpoints with custom values | |
/// @include media(">desktop", "<=1350px") { } | |
/// | |
/// @example scss - With a static expression | |
/// @include media("retina2x") { } | |
/// | |
/// @example scss - Mixing everything | |
/// @include media(">=350px", "<tablet", "retina3x") { } | |
/// | |
@mixin media($conditions...) { | |
@if length($conditions) == 0 { | |
@content; | |
} @else { | |
@media #{unquote(parse-expression(nth($conditions, 1)))} { | |
// Recursive call | |
@include media(slice($conditions, 2)...) { | |
@content; | |
} | |
} | |
} | |
} | |
@include media('>=tablet', '<desktop', 'retina3x') { | |
color: blue; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@media (min-width: 768px) and (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 3) { | |
color: blue; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment