Responsive with SASS Mixin use breakpoint on if the condition
SCSS Code
_mixins.scss code
@mixin response($breakpoint) { @if($breakpoint == xl){ @media(max-width: 1200px){ @content; } } @if($breakpoint == lg){ @media(max-width: 1000px){ @content; } } @if($breakpoint == md){ @media(max-width: 768px){ @content; } } }
Use mixin in other SCSS files
.first-nav{ grid-column: 7 / 10; grid-row: 1 / 2; @include navigation; @include response(xl){ grid-column: 6/10; // @content } @include response(lg){ grid-column: 5/10; // @content } @include response(md){ grid-column: 4/10; // @content } } .second-nav{ grid-column: 1 /10; grid-row: 3/4; @include navigation; margin-top: 30px; @include response(lg){ grid-column: 1/10; // @content } @include response(md){ grid-column: 1/-1; // @content } }
CSS Output
@media (max-width: 1200px) { .first-nav { grid-column: 6/10; } } @media (max-width: 1000px) { .first-nav { grid-column: 5/10; } } @media (max-width: 768px) { .first-nav { grid-column: 4/10; } }