// Single line comments

/* Variables */
$width: 5em;
#main {
  width: $width;
}
$default: "content" !default;

/* Interpolation */
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

/* @imports */
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

/* Nested @media blocks */
@media print {
	.stuff {
		color: red;
	}
	
	.things {
		width: 14px;
		
		@media screen {
			.stuff {
				color: red;
			}
		}
	}
	
	@media print {
		.stuff {
			color: red;
		}
		
		.things {
			width: 14px;
		}
	}
}

/* Extensions */
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

/* @debug and @warn */
@debug 10em + 12em;

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

/* Control statements */
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

/* Mixins */
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

@include large-text;

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

/* Custom @function definitions */
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

