beyond-css-course-material/challenges/04-maps/01/style.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;
}
}