Usage
Sass
media($group, $custom)
Parameters
$group
(Required) (String) The name of the size group
Default: None
$custom
(Optional) (String) A custom media query
Default: None
Parameter Notes
$group can be anything from “ultrawidescreen” to “tablet” or “tablet_landscape” to “print” or even Bootstrap group names such as “sm”, “md”, “lg”, and extended sizing like “xl”, “xxl”, and “uw”.
If using $custom, pass “custom” to the $group parameter.
Examples
Sass
.element {@include media("mobile") {background: red;};}
Sass
.element {@include media("custom", "only screen and (max-width: 550px)") {background: red;};}
Additional Notes
Current group size breakpoints:
- “ultrawidescreen”: 2048px (and larger)
- “widescreen”: 1600px (and larger)
- “tablet_landscape”: 1023px (and smaller)
- “tablet”: 767px (and smaller)
- “mobile_landscape”: 668px (and smaller)
- “mobile”: 376px (and smaller)
- “print”
- “sm”: 544px (and larger)
- “md”: 768px (and larger)
- “lg”: 992px (and larger)
- “xl”: 1200px (and larger)
- “xxl”: 1600px (and larger)
- “uw”: 2048px (and larger)
Source File
Located in /assets/scss/partials/_mixins.scss on line 165.
Sass
@mixin media($group, $custom: ""){
//Device Types
@if ( $group == "desktop" or $group == "laptop" ){
@media (hover: hover){& {@content}} //Devices that can hover
}
@if ( $group == "smartphone" or $group == "touchscreen" ){
@media (hover: none) and (pointer: coarse){& {@content}} //Devices that cannot hover and have a coarse pointer
}
@if ( $group == "print" ){
@media only print {& {@content}}
}
//Screen Sizes
@if ( $group == "tablet_landscape" ){
@include tablet(landscape){& {@content}} //This size and smaller
}
@if ( $group == "tablet" ){
@include tablet(){& {@content}} //This size and smaller
}
@if ( $group == "mobile_landscape" ){
@include mobile(landscape){& {@content}} //This size and smaller
}
@if ( $group == "mobile" ){
@include mobile(){& {@content}} //This size and smaller
}
//Bootstrap
@if ( $group == "sm" ){
@media (min-width: #{$sm}px){& {@content}} //This size and larger
}
@if ( $group == "md" ){
@media (min-width: #{$md}px){& {@content}} //This size and larger
}
@if ( $group == "lg" ){
@media (min-width: #{$lg}px){& {@content}} //This size and larger
}
@if ( $group == "xl" ){
@media (min-width: #{$xl}px){& {@content}} //This size and larger
}
@if ( $group == "xxl" or $group == "widescreen" ){
@media (min-width: #{$xxl}px){& {@content}} //This size and larger
}
@if ( $group == "ultrawidescreen" or $group == "uw" ){
@media only screen and (min-width: 2048px){& {@content}} //This size and larger
}
//Custom media query
@if ( $group == "custom" ){
@media #{$custom} {& {@content}}
}
}
Override
To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.
Sass
@mixin media($group, $custom){
//Write your own code here, leave it blank, or return false.
}