Responsive Development can be painful when you have to worry about all of the different breakpoints in your code. Developing in SASS makes it a bit easier since you can assign your breakpoints to variables, however it doesn’t solve the problem of the duplicated @media selectors throughout your .scss code. Not to mention, you have to separate the code for your class from the code for your class at a certain breakpoint.

By using this mixin, that all changes. It does two things for you:

Generates the media query statement automatically at the breakpoint “name” you specify Allows you to keep your regular css code in the same place as your mobile-specific code.

This mixin uses SASS maps (introduced in 3.3 so make sure you’re upgraded) to specify breakpoint names mapped to sizes and generates a media query statement at the mapped size.

The mixin

$sizes: ( small: 340px, medium: 720px, large: 1100px, xlarge: 2000px ); @mixin break-point($point) { $converted: map-get($sizes, $point); @media(min-width:$converted) {@content} } 1 2 3 4 5 6 7 8 9 10 11 $sizes : ( small : 340px, medium : 720px, large : 1100px, xlarge : 2000px ) ; @mixin break-point ( $point ) { $converted : map-get ( $sizes , $point ) ; @media ( min-width : $converted ) { @content } }



The Example

.box-2 { background-color: green; width: 10%; @include break-point("xlarge") {width: 100%}; @include break-point("small") {width: 25%}; } 1 2 3 4 5 6 .box-2 { background-color : green ; width : 10% ; @include break-point ( "xlarge" ) { width : 100% } ; @include break-point ( "small" ) { width : 25% } ; }



Output CSS code

.box-2 { width: 10% background-color: green; } @media (min-width: 2000px) { .box-2 { width: 100%; } } @media (min-width: 340px) { .box-2 { width: 25%; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .box-2 { width : 10% background-color : green ; } @media (min-width: 2000px) { .box-2 { width : 100% ; } } @media (min-width: 340px) { .box-2 { width : 25% ; } }

Enjoy!