// Functions
@function upper-bound($list) {
$result: nth($list, 1);
@each $num in $list {
$result: max($num, $result);
}
@return $result;
}
@function lower-bound($list) {
$result: nth($list, 1);
@each $num in $list {
$result: min($num, $result);
}
@return $result;
}
// Defining values
$list-of-breakpoints: xsmall small medium large xlarge;
$list-of-conditions: up only;
$xsmall-range: (0px, 568px);
$small-range: (569px, 767px);
$medium-range: (768px, 1023px);
$large-range: (1024px, 1440px);
$xlarge-range: (1440px);
// Defining media queries
$screen: "only screen" !default;
$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;
$xsmall-up: $screen !default;
$xsmall-only: "#{$screen} and (max-width: #{upper-bound($xsmall-range)})" !default;
$small-up: "#{$screen} and (min-width:#{lower-bound($small-range)})" !default;
$small-only: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($small-range)})" !default;
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
// Mixin
@mixin respond-to($breakpoint, $condition: up) {
$mapping: (
xsmall_up: $xsmall-up,
xsmall_only: $xsmall-only,
small_up: $small-up,
small_only: $small-only,
medium_up: $medium-up,
medium_only: $medium-only,
large_up: $large-up,
large_only: $large-only,
xlarge_up: $xlarge-up,
xlarge_only: $xlarge-only
);
$key: "#{$breakpoint}_#{$condition}";
$mq: map_get($mapping, $key);
@media #{$mq} {
@content;
}
}
// Usage
@include respond-to(small, up) {
// your style ...
}
// CSS Output
@media only screen and (min-width:569px) {
// your style ...
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.