Demo: google-code-prettify/lang-scss

// Comments
/*
Comments
*/

@import "foo" screen;
@import "http://foo.com/bar";
@import url(baz);

$name: 'foo';
$width: 5em !default;

#main p.#{$name} {
    @include foo($bar);
    @extend .baz;
    width: $width*2;
    height: (500px/2);
    margin-left: 5px + 8px/2px;
    line-height: 1.2;
    color: #ff0000;
    #{$attr}-color: blue;
    font: {
        family: "Lucida Grande", Verdana, sans-serif;
        size: 30em;
    }
    &:after {
        content: "bar";
        color: hsl(0, 100%, 50%);
        font: #{$font-size}/#{$line-height};
    }
    body.page & {
        background-image: url("/image/hacked.png");
        -webkit-transition: 0.2s;
    }
}

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

@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;
}

p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @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');
    }
}

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

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