-----	Variables			-----
	--	SCSS Syntax		--
		$font-stack:    Helvetica, sans-serif;
		$primary-color: #333;

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

	--	CSS generated	--
	body {
	  font: 100% Helvetica, sans-serif;
	  color: #333;
	}

-----	Nesting			-----
	--	SCSS Syntax		--
		nav {
		  ul {
			margin: 0;
			padding: 0;
			list-style: none;
		  }

		  li { display: inline-block; }

		  a {
			display: block;
			padding: 6px 12px;
			text-decoration: none;
		  }
		}

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

		nav li {
		  display: inline-block;
		}

		nav a {
		  display: block;
		  padding: 6px 12px;
		  text-decoration: none;
		}

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

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

	--	CSS generated	--
	.box {
	  -webkit-border-radius: 10px;
	  -moz-border-radius: 10px;
	  -ms-border-radius: 10px;
	  border-radius: 10px;
	}

-----	@extend			-----
	--	SCSS Syntax		--
	.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
	}

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

	.error {
	  @extend .message;
	  border-color: red;
	}

	.warning {
	  @extend .message;
	  border-color: yellow;
	}

	--	CSS generated	--
	.message, .success, .error, .warning {
	  border: 1px solid #cccccc;
	  padding: 10px;
	  color: #333;
	}

	.success {
	  border-color: green;
	}

	.error {
	  border-color: red;
	}

	.warning {
	  border-color: yellow;
	}

-----	Operators			-----
	--	SCSS Syntax		--
	.container { width: 100%; }

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

	--	CSS generated	--
	aside[role="complementary"] {
	  float: right;
	  width: 300px / 960px * 100%;
	}