@mixin mq-min()
Create a min-width media query.
Parameters & Return
$min: (Number)
The length to be used.
@error
$min is not a length unit.
Example
scss
Usage
.block {
display: none;
@include mq-min(breakpoint(desktop)) {
display: block;
}
}
css
compiled
.block {
display: none;
}
@media only screen and (min-width: 1200px) {
.block {
display: block;
}
}
Used By
@mixin mq()
@mixin mq-max()
Create a max-width media query.
max-width subtracts 1 unit to avoid conflicts with min-width queries.
Parameters & Return
$min: (Number)
The length to be used.
@error
$max is not a length unit.
Example
scss
Usage
.block {
display: none;
@include mq-max(breakpoint(desktop)) {
display: block;
}
}
css
compiled
.block {
display: none;
}
@media only screen and (max-width: 1199px) {
.block {
display: block;
}
}
Used By
@mixin mq()
@mixin mq()
Create a media query range (between min-width and max-width).
max-width subtracts 1 unit to avoid conflicts with min-width queries.
Parameters & Return
$min: (Number)
The minimum breakpoint.
$max: (Number)
The maximum breakpoint.
@error
One of the parameters is not a length unit.
Example
scss
Usage
.block {
@include mq(breakpoint(tablet-portrait), breakpoint(tablet-landscape)) {
display: block;
}
}
css
compiled
@media only screen and (min-width: 600px) and (max-width: 899px) {
.block {
display: block;
}
}