gistfile1.css

// ---------------------------------------
// BLQ
// ---------------------------------------
#blq-container {
	background: @site-background;
	
	// ---------------------------------------
	// IMPORTS
	// ---------------------------------------

	// -- CORE ONLY -------------------------------------
	.i (core) when (@device = core) {
		a {text-transform: uppercase;}
	}
	// -- CORE -------------------------------------
	.i (core) {
		background: blue;
		font-size: 30px;
	}

	// -- COMPACT -------------------------------------
	.i (compact) when (@device = compact) {
		@media (max-width: 640px) {
			a {text-decoration: underline;}
		}
	}
	// -- COMPACT ONLY -------------------------------------
	.i (compact) {
		.i (core);
		@media (max-width: 640px) {
			background: red;
		}
	}

	// -- TABLET ONLY -------------------------------------
	.i (tablet) when (@device = tablet) {
		@media (min-width: 640px) {
			a {text-decoration: line-through;}
		}
	}
	// -- TABLET -------------------------------------
	.i (tablet) {
		.i (compact);
		@media (min-width: 640px) {
			background: green;
		}
	}

	// -- WIDE ONLY -------------------------------------
	.i (wide) when (@device = wide) {
		@media (min-width: 960px) {
			a {text-transform: uppercase; text-decoration: line-through;}
		}
	}
	// -- WIDE -------------------------------------
	.i (wide) {
		.i (tablet);
		@media (min-width: 960px) {
			background: yellow;
		}
	}

	// -- CALL IT! -------------------------------------
	.i (@device);
} // end #blq-container