Utilizing @include-media for SASS breakpoints (). Seeking to create a dynamic breakpoint helper text that changes background color on various media sizes.
Important
Breakpoint mixin - https://raw.githubusercontent.com/eduardoboucas/include-media/master/dist/_include-media.scss. Looking for a straightforward solution. The end goal is to dynamically generate colors from maps or lists.
SCSS
// BREAKPOINT (Mobile first)
$breakpoints: (
'sm': 540px,
'md': 768px,
'lg': 1025px,
'xl': 1360px
)!default;
$breakpoint-colors: (
red, green, yellow, blue
)
// Container (Mobile first)
$container: (
'sm': 520px,
'md': 740px,
'lg': 1024px,
'xl': 1320px,
)!default;
// generate
@each $name, $value in $breakpoints{
@include media('>=#{$name}') {
&:after {
content: "#{$name} >= #{$value}";
}
}
}
}
Expected Output
@media (min-width: 540px) {
body:after {
content: "Media: sm >= 540px | Container: 520px;";
background-color: red;
}
}
@media (min-width: 1024px) {
body:after {
content: "Media: sm >= 768px | Container: 740px;";
background-color: green;
}
}
@media (min-width: 1200px) {
body:after {
content: "Media: sm >= 1025px | Container: 1024px;";
background-color: yellow;
}
}
@media (min-width: 1600px) {
body:after {
content: "Media: sm >= 1360px | Container: 1320px;";
background-color: blue;
}
}