Media query – breakpoints
Creating breakpoints for @media query using @mixin scss.
Breakpoints: (1rem = 16px)
- 576px = 36em;
- 768px = 48em;
- 992px = 62em;
- 1200px = 75em;
SCSS code
$media-queries-up: (
small: (
"breakpoint": '(min-width: 36em)',
),
medium: (
"breakpoint": '(min-width: 48em)',
),
large: (
"breakpoint": '(min-width: 62em)',
),
xlarge: (
"breakpoint": '(min-width: 75em)',
)
);
@mixin media-query-up ($size) {
@each $item, $value in $media-queries-up {
@if $item == $size {
@if map-get($value, "breakpoint") {
@media only screen and #{map-get($value, "breakpoint")} {
@content;
}
}
}
}
}
I bet my nine lives on you-oooo-ooo-hooo lick face hiss at owner, pee a lot, and meow repeatedly scratch at fence purrrrrr eat muffins and poutine until owner comes back, yet meow meow, and nap all day lick the curtain just to be annoying but love you, then bite you sleeps on my head. do not try to mix old food with new one to fool me! meow meow, i tell my human so i like frogs and 0 gravity yet
p {
background-color: hsl(37, 73%, 45%); /* orange */
font-size: 0.8rem;
}
@include media-query-up(medium) {
p {
background-color: hsla(195, 72%, 45%, 1); /* blue */
font-size: 1rem;
}
}
@include media-query-up(large) {
p {
background-color: hsl(353, 72%, 45%); /* red */
font-size: 1.2rem;
}
}
@include media-query-up(xlarge) {
p {
background-color: hsl(117, 27%, 41%); /* green */
font-size: 1.4rem;
}
}