38 lines
585 B
SCSS
38 lines
585 B
SCSS
|
@use "sass:map";
|
||
|
|
|
||
|
|
$breakpoints: (
|
||
|
|
small: 30em,
|
||
|
|
medium: 45em,
|
||
|
|
large: 65em,
|
||
|
|
xl: 80em,
|
||
|
|
);
|
||
|
|
|
||
|
|
@mixin mq($size) {
|
||
|
|
$breakpoint: map.get($breakpoints, $size);
|
||
|
|
|
||
|
|
@media screen and (min-width: $breakpoint) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
// all of these should work
|
||
|
|
@include mq(medium) {
|
||
|
|
background: pink;
|
||
|
|
}
|
||
|
|
@include mq(500px) {
|
||
|
|
background: lightblue;
|
||
|
|
}
|
||
|
|
@include mq(100em) {
|
||
|
|
background: #efefef;
|
||
|
|
}
|
||
|
|
|
||
|
|
// these should fail, with an error telling me why
|
||
|
|
@include mq(reallysmall) {
|
||
|
|
background: yellow;
|
||
|
|
}
|
||
|
|
@include mq(5000) {
|
||
|
|
background: purple;
|
||
|
|
}
|
||
|
|
}
|