reduce repetitive media query head in sass - html

Question

I use mobile first principle for my sass (css), but I found quite a pattern which is quite disturbing.
.innerWrap {
display: flex;
align-items: center;
&:first-child {
margin-right: 20px;
#media only screen and (min-width: 640px) {
margin-right: 0;
}
}
#media only screen and (min-width: 640px) {
flex: 1;
}
}
Imagine there will be more screen size, there will be
#media only screen and (min-width: 1200px)
#media only screen and (min-width: 1200px)
#media only screen and (min-width: 1200px)
everywhere, how to solve this?

Answer 1

You can also set a map with all you breakpoints (you can call them as you want) and use it in a mixin.
// your variables.scss file
$breakpoints:(
sm: 640px,
md: 1200px,
lg: 1400px,
xl: 1900px
);
// your mixins.scss file
#mixin min-width($breakpoint){
#media only screen and (min-width:#{map-get($breakpoints, $breakpoint)}) {
#content;
}
}
// your module.scss file
.innerWrap {
display: flex;
align-items: center;
&:first-child {
margin-right: 20px;
#include min-width(sm){
margin-right: 0;
}
}
#include min-width(sm){
flex: 1;
}
}

Answer 2

you can use #mixin to manage it
https://jsfiddle.net/wyd6pxnh/2/
#mixin mediaQuery($point) {
$mq-device1: "(min-width: 640px)";
$mq-device2: "(min-width: 1200px)";
#if $point=="device1" {
#media #{$mq-device1} {
#content;
}
}
#else if $point=="device2" {
#media #{$mq-device2} {
#content;
}
}
}
.innerWrap {
display: flex;
align-items: center;
&:first-child {
margin-right: 20px;
#include mediaQuery('device1') {
margin-right: 0;
}
}
#include mediaQuery('device1') {
flex: 1;
}
}
Output
.innerWrap {
display: flex;
align-items: center;
}
.innerWrap:first-child {
margin-right: 20px;
}
#media (min-width: 640px) {
.innerWrap:first-child {
margin-right: 0;
}
}
#media (min-width: 640px) {
.innerWrap {
flex: 1;
}
}