// variables
@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
@fnord: "I am fnord.";

#header {
	color: @light-blue;
}

.class1 {
	@fnord: 1;
	one: @fnord;
}

// mixins
.bordered {
	border-top: dotted 1px black;
	border-bottom: solid 2px black;
}

.border-radius (@radius: 5px; @var2: #fc0) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

.wrap () {
	text-wrap: wrap;
	word-wrap: break-word;
}

.mixin (@a) when (lightness(@a) >= 50%) {
	background-color: black;
}

#menu a {
	color: #111;
	.bordered;
	padding: 10px;
}

#header {
	.border-radius(4px);
	.wrap !important;
}

// nesting
#header {
	color: black;

	.navigation {
		font-size: 12px;
	}

	.logo {
		width: 300px;
		&:hover { text-decoration: none }
	}
}

.one {
	@media (width: 400px) {
		font-size: 1.2em;
		@media print and color {
			color: blue;
		}
	}
}

// extend
div {
	background-color: #e0e0e0;
}

p:extend(div) {
	color: #101010;
}

// namespaces
#bundle {
	.button () {
		display: block;
	}
}

#header a {
	color: orange;
	#bundle > .button;
}

// interpolation
.@{name} {
	color: black;
	filter: ~"ms:alwaysHasItsOwnSyntax.For.@{what}()";
}