Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My SCSS respondTo media query mixin
.profile .title {
font-size: 1.6rem;
font-weight: bold;
}
@media screen and (min-width: 0) and (max-width: 1087px) {
.profile .title {
font-size: 1.3rem;
}
}
$breakPoints: (
"mobile": (
"min": 0,
"max": 699
),
"tablet": (
"min": 700,
"max": 1023
),
"desktop": (
"min": 1024,
"max": 1299
),
"widescreen": (
"min": 1300,
"max": 100000px
)
);
@mixin respondTo($requestedBreakPoints, $media: "screen") {
$minValue: false;
$maxValue: false;
@each $breakPoint in $requestedBreakPoints {
$bpData: map-get($breakPoints, $breakPoint);
@if (map-has-key($bpData, "min")) {
@if (
($minValue == false) or
(map-get($bpData, "min") < $minValue)
) {
$minValue: map-get($bpData, "min");
}
}
@if (map-has-key($bpData, "max")) {
@if (
($maxValue == false) or
(map-get($bpData, "max") > $maxValue)
) {
$maxValue: map-get($bpData, "max");
}
}
}
@media #{$media} and (min-width: $minValue) and (max-width: $maxValue) {
@content;
}
} // close respondTo
.profile {
.title {
font-size: 1.6rem;
font-weight: bold;
@include respondTo(mobile tablet) {
font-size: 1.3rem;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment