MQ Test

gistfile1.txt

@if $tests == true {
	body {
		&:before {
			display: block;
			position: fixed;
			z-index: 100000;
			background: black;
			bottom: 0;
			right: 0;
			padding: .5em 1em;
			content: 'No Media Query';
			color: transparentize(#fff,.25);
			border-top-left-radius: 10px;
			font-size: (12/16)+em;
		}
		&:after {
			display: block;
			position: fixed;
			height: 5px;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: (100000-1);
			content: '';
			background: black;
		}

		@include breakpoint($q-xsmall) {
			&:before {
				content: '$q-xsmall: 300';
			}
			&:before,&:after {
				background: dodgerblue;
			}
		}

		@include breakpoint($q-small) {
			&:before {
				content: '$q-small: 400';
			}
			&:before,
			&:after {
				background: darkseagreen;
			}
		}

		@include breakpoint($q-medium) {
			&:before {
				content: '$q-medium: 600';
			}
			&:before,
			&:after {
				background: lightcoral;
			}
		}

		@include breakpoint($q-large) {
			&:before {
				content: '$q-large: 750';
			}
			&:before,
			&:after {
				background: mediumvioletred;
			}
		}

		@include breakpoint($q-xlarge) {
			&:before {
				content: '$q-xlarge: 950';
			}
			&:before,
			&:after {
				background: hotpink;
			}
		}

		@include breakpoint($q-xxlarge) {
			&:before {
				content: '$q-xxlarge: 1100';
			}
			&:before,
			&:after {
				background: orangered;
			}
		}

		@include breakpoint($q-xxxlarge) {
			&:before {
				content: '$q-xxxlarge: 1300';
			}
			&:before,
			&:after {
				background: dodgerblue;
			}
		}
	}
}