128 lines
4.1 KiB
SCSS
Executable File
128 lines
4.1 KiB
SCSS
Executable File
// 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 300px)
|
|
(tablet 600px)
|
|
(desktop 900px)
|
|
(wide 1260px)
|
|
) !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;
|
|
|
|
|
|
@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-retrieve-breakpoint-width($name) {
|
|
@each $breakpoint in $mq-breakpoints {
|
|
$breakpoint-name: nth($breakpoint, 1);
|
|
$breakpoint-width: nth($breakpoint, 2);
|
|
|
|
@if $name == $breakpoint-name {
|
|
@return $breakpoint-width;
|
|
}
|
|
}
|
|
@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-retrieve-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-retrieve-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-retrieve-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);
|
|
// Credit goes to Sam Richard (author of the `respond-to()` mixin)
|
|
@function mq-add-breakpoint($name, $breakpoint) {
|
|
$breakpoint: $name $breakpoint;
|
|
$output: append($mq-breakpoints, $breakpoint, 'space');
|
|
@return $output;
|
|
}
|