Quick tip: Responsive "Debug Mode" with SASS

I use styled-component with React but I still have a sass file for global stuff. I have a main "variables" file that I use to share variables to both JS and SASS files using sass-extract-loader. Using the best of two worlds has a lot of benefits, you can use this mixin to know what's the current responsive screen you are working on:

// Turn "Responsive debug mode" on/off.
$debugResponsive: true;

/**
 * Responsive variables.
 * You can assign these variables in a separated file 
 * to share them between JS/SCSS files.
 */
$screenSizes: (
	xs: 480,
	sm: 767,
	md: 960,
	lg: 1200,
);

/**
 * Responsive debug mode.
 */
@each $screen, $size in $screenSizes {
	// Getting current index value.
	$i: index(($screenSizes), ($screen $size));
	// Setting "min-width" value based on "previous iteration value" + 1
	$minWidth: if($i - 1 > 0 , "min-width: #{nth(map-values($screenSizes), $i - 1) + 1}px", "min-width: 1px");

	@media only screen and (#{$minWidth}) and (max-width: #{$size}px) {
		// Debug message.
		// Shows your current "screen size" on the top right corner.
		@if $debugResponsive {
			body:before {
				display: block;
				position: fixed;
				top: 0;
				right: 0;
				content: "#{$screen} screen";
				padding: 0 .5em;
				background: red;
				color: white;
				font-size: 1rem;
				z-index: 9999;
			}
		}
	}
}

Demo: You might open the project on a new window to resize it