1. Shu Zong Chen
  2. sass_parser

Source

sass_parser / sample.scss

#main {
  color: #a0ff00;
  width: 97%;
}
#main p {
  color: #b0ff00;
  width: 97%;
}
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/* 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; }
$width: 5em;
#main {
  width: $width;
}
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!"; } }

@include firefox-message(".header");
p {
  width: 1in + 8pt;
}
p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
p {
  color: #010203 + #040506;
}
p {
  color: #010203 * 2;
}
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.8);
  background-color: transparentize($translucent-red, 50%);
}
p {
  cursor: e + -resize;
}
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif"; }
p {
  margin: 3px + 4px auto;
}
p:before {
  content: "I ate #{5 + 10} pies!"; }
p {
  width: 1em + (2em * 3);
}
p {
  color: hsl(0, 100%, 0.5);
}
$name: foo;
$attr: border;
p.#{$name} { #{$attr}-color: blue }
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
@import "foo.scss";
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}