@import "rounded-corners", "text-shadow";
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
$content: "Second content?" !default;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

nav {
	font-size: 20px;

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	-o-border-radius: $radius;
	border-radius: $radius;
}

.box {
	@include border-radius(10px);
}

message {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
}

.success {
	@extend .message;
	border-color: green;
}

article[role="main"] {
	float: left;
	width: 600px / 960px * 100%;
}

// comment
a {
	font-weight: bold;
	text-decoration: none;
	&:hover { text-decoration: underline; }
	body.firefox & { font-weight: normal; }
}

// should not be rendered, @extend-only
#context a%extreme {
	color: blue;
	font-weight: bold;
	font-size: 2em;
}

.notice {
	@extend %extreme;
}

@debug 10em + 12em;

p {
	@if 1 + 1 == 2 { border: 1px solid;  }
	@if 5 < 3      { border: 2px dotted; }
	@if null       { border: 3px double; }
}

@mixin firefox-message($selector) {
	body.firefox #{$selector}:before {
		content: "Hi, Firefox users!";
	}
}