// snippets from the Sass documentation at http://sass-lang.com/

/* css stuff */
/* charset */
@charset "UTF-8";

/* nested rules */
#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

/* parent selector (&) */
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

/* nested properties */
.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
  color: black;
}

/* nesting conflicts */
tr.default {
  foo: { // properties
    foo : 1;
  }
  foo: 1px; // rule
  foo.bar { // selector
    foo : 1;
  }
  foo:bar { // selector
    foo : 1;
  }
  foo: 1px; // rule
}

/* extended comment syntax */
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

/* variables */
$width: 5em;
$width: "Second width?" !default;
#main {
  $localvar: 6em;
  width: $width;

  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

/* variable declaration with whitespaces */
// Set the color of your columns
$grid-background-column-color     : rgba(100, 100, 225, 0.25)   !default;

/* operations*/
p {
  width: (1em + 2em) * 3;
  color: #010203 + #040506;
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
  content: "I ate #{5 + 10} pies!";
  color: hsl(0, 100%, 50%);
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
/* functions*/
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }

/* @import */
@import "foo.scss";
$family: unquote("Droid+Sans");
@import "rounded-corners", url("http://fonts.googleapis.com/css?family=#{$family}");
#main {
  @import "example";
}

/* @media */
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

/* @extend */
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme !optional;
}

/* @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 directives */

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

/* if else statement */
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else {
    color: black;
  }
}

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

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

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

/* function with controlstatements */
@function foo($total, $a) {
  @for $i from 0 to $total {
    @if (unit($a) == "%") and ($i == ($total - 1)) {
      $z: 100%;
      @return '1';
    }
  }
  @return $grid;
}

/* @mixin simple*/
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
}

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

/* mixin with varargs */
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

/* include with varargs */
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

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

@if $attr {
  @mixin apply-to-ie6-only {
  }
}


/* attributes */
[rel="external"]::after {
    content: 's';
}
/*page */
@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

/* missing semicolons */
tr.default {
  foo.bar {
    $foo: 1px
  }
  foo: {
    foo : white
  }
  foo.bar1 {
    @extend tr.default
  }
  foo.bar2 {
    @import "compass"
  }
  bar: black
}

/* rules without whitespace */
legend {foo{a:s}margin-top:0;margin-bottom:#123;margin-top:s(1)}

/* extend with interpolation variable */
@mixin error($a: false) {
  @extend .#{$a};
  @extend ##{$a};
}
#bar {a: 1px;}
.bar {b: 1px;}
foo {
  @include error('bar');
}

/* css3: @font face */
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

/* rule names with variables */
.orbit-#{$d}-prev {
  #{$d}-style: 0;
  foo-#{$d}: 1;
  #{$d}-bar-#{$d}: 2;
  foo-#{$d}-bar: 1;
}

/* keyframes */
@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* string escaping */
[data-icon='test-1']:before {
  content:'\\';
}
/* a comment */
$var1: '\'';
$var2: "\"";
/* another comment */