Anyone can check my code about Media Quires Mixin In SCSS
I Create this Media Quires Mixin custom. Can anyone check tis code?
$breakpoints: (
"sm_phone": 480px,
"min_phone": 576px,
"phone": 640px,
"tablet": 768px,
"max_tablet": 840px,
"desktop": 992px,
"desktop_max": 1024px,
"widescreen": 1200px,
"xl_widescreen": 1500px,
);
@mixin breakpoint($breakpoint, $direction) {
$media-query: null;
@if map-has-key($breakpoints, $breakpoint) {
$breakpoint-value: map-get($breakpoints, $breakpoint);
@if $direction == "max" {
$media-query: "(max-width: #{($breakpoint-value - 1)})";
} @else if $direction == "min" {
$media-query: "(min-width: #{$breakpoint-value})";
} @else {
$media-query: "(#{$direction}: #{$breakpoint-value})";
}
} @else {
$media-query: "(#{$direction}: #{$breakpoint})";
}
@media #{$media-query} {
@content;
}
}
p {
@include breakpoint(desktop, "min") {
color: red;
}
}
.class {
@include breakpoint(1200px, "min") {
display: block;
}
@include breakpoint(1200px, "max") {
display: block;
}
@include breakpoint(phone, "min") {
@include breakpoint(desktop_max, "max") {
display: none;
}
}
}
0 Replies