45 lines
2.0 KiB
SCSS
45 lines
2.0 KiB
SCSS
|
$smallScreen: 640px;
|
||
|
|
$wideScreen: 1200px;
|
||
|
|
$ultraWideScreen: 1600px;
|
||
|
|
|
||
|
|
/** ### forSize
|
||
|
|
* This mixin allows us to apply some rules selectively based on the screen
|
||
|
|
* size. There are three primary sizes: `small`, `medium`, and `large`, which
|
||
|
|
* are mutually exclusive. Additionally there are two additional sizes:
|
||
|
|
* `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
|
||
|
|
* value which is not the small screen size, so it overlaps with medium,
|
||
|
|
* large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
|
||
|
|
* than large, but neither large nor ultraLarge specify maximum widths,
|
||
|
|
* so ultraLarge is a strict subset of large. A screen large enough to match
|
||
|
|
* ultraLarge will also match large (compare with medium and large: matching
|
||
|
|
* medium means it will not match large, and vice versa). */
|
||
|
|
@mixin forSize($size) {
|
||
|
|
|
||
|
|
@if $size == small {
|
||
|
|
@media screen and (max-width: $smallScreen) { @content; } }
|
||
|
|
@else if $size == notSmall {
|
||
|
|
@media screen and (min-width: $smallScreen + 1) { @content; } }
|
||
|
|
@else if $size == medium {
|
||
|
|
@media screen and (min-width: $smallScreen + 1) and (max-width: $wideScreen - 1) { @content; } }
|
||
|
|
@else if $size == large {
|
||
|
|
@media screen and (min-width: $wideScreen) { @content; } }
|
||
|
|
@else if $size == ultraLarge {
|
||
|
|
@media screen and (min-width: $ultraWideScreen) { @content; } }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@mixin forAspect($aspect) {
|
||
|
|
|
||
|
|
@if $aspect == tall {
|
||
|
|
@media screen and (max-aspect-ratio: 1/2) { @content; } }
|
||
|
|
@else if $aspect == portrait {
|
||
|
|
@media screen and (min-aspect-ratio: 11/20) and (max-aspect-ratio: 5/6) { @content; } }
|
||
|
|
@else if $aspect == even {
|
||
|
|
@media screen and (min-aspect-ratio: 11/12) and (max-aspect-ratio: 6/5) { @content; } }
|
||
|
|
@else if $aspect == landscape {
|
||
|
|
@media screen and (min-aspect-ratio: 12/11) and (max-aspect-ratio: 31/18) { @content; } }
|
||
|
|
@else if $aspect == wide {
|
||
|
|
@media screen and (min-aspect-ratio: 16/9) { @content; } }
|
||
|
|
|
||
|
|
}
|