Test responsive breakpoints in scss

test_responsive.css

	body:before, #wrapper:after, #wrapper:before {
		position: fixed;
		content: '';
		display: block;
		border: 1px solid #000;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0.5;
	}
	body:before {
		border-color: orange;
		width: $phone - 1;
		z-index: 100;
		background: orange;
	}
	#wrapper:before {
		border-color: green;
		background: green;
		width: $tablet - 1;
		z-index: 50;
	}
	#wrapper:after {
		width: 100%;
		background: blue;
		z-index: 25;
	}

	body:after {
		position: fixed;
		top: 10px;
		left: 10px;
		background: #EEE;
		border: 1px solid #000;
		padding: 1em;
		z-index: 200;

		@include respond-to (phone) {
			content: 'Phone';
			color: orange;
		}

		@include respond-to (tablet) {
			content: 'Tablet';
			color: green;
		}

		@include respond-to (desktop) {
			content: 'Desktop';
			color: blue;
		}
	}