Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

//nested rules
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
    
  }
    
  &:hover {
    font-weight: bold;
  }
  
  //the following & will be inside out
  .container & {
    background: #red;
  }

  //the following nesting will be inside out
  @media screen {
    
    width: 500px;
  }
}

//bem &
.parent {
  &_child {
    color:red;
  }
  
  child_& {
     color:red;
  }
}

//this comment will now be output to css
/* this comment will stay output to css */

//place holder %x, can be extended like a class
//selector, the difference is the name, and output
%x {
   color:red;
}

.y {
  @extend %x;
}

.z {
  @extend %x;
}

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}

//string
//both $color, $font here is string variable
@mixin string ($color, $font: null) {
  color: $color;
  font-family: $font;
}

.testString1 {
  @include string(red, "Times New Roman");
}

.testString2 {
  @include string('some invalid color');
}

@mixin interpo ($selector, $name, $value, $content) {
  #{$selector}:before {
  #{$name}: $value;
  content: $content;
  //if you use content: #{$content};
  //it will output to 
  //content: Hi, Firefox users!!!;
  //
  //if you use //if you use content: $content;
  //it will out put to 
  //content: "Hi, Firefox users!!!";
  // so interpolation does just output the value as string
  }
}

@include interpo ('.test', 'color', 'red', 'Hi, Firefox users!!!');

//you can treat all value as a list, you can seperate
//the items of list by " ", or ",", sometimes, you may need to group the items
//using ()
@mixin list ($margin, $font) {
  margin: $margin;
  font-family: $font;
}

.useList1 {
  //$font is a list but you don't need () to mark it as a list
  $font: "Times New Roman", Georgia, Serif;
  @include list(1px 2px 3px 4px, $font);
}

.useList2 {
  //you need to use () to mark a value as a list in the following case, 
  //because it is inlined as argument to a mixin call
  @include list(1px 2px 3px 4px, ("Times New Roman", Georgia, Serif));
}

$map: (key1: value1, key2: value2, key3: value3);

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}


p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height}; //it will output to  font: 12px / 30px;
  font: $font-size/$line-height; //it will output to font: 0.4;
}


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

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


$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');
  }
}


@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

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

//use Variable Arguments
@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);
}


//use list
@mixin box-shadow2($shadows) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows2 {
  //the following argument is treated as a list using ()
  @include box-shadow2((0px 4px 5px #666, 2px 6px 10px #999));
}


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

//distructuring $values using map, the keys
//is used to map the name of parameters to pass values
//the following order of the keys of map is different from the order
//parameters, but this is fine
$value-map: (background: #0000ff, text: #00ff00, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

//mixin content
$font-size: 1em;

@mixin wrap($color) {
     * html {
          color: $color;
          @content;
     }
}

@include wrap(red) {
     #logo {
          font-size: $font-size;
          background-image: url(/logo.gif);
     }
}


$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}

//The block of content passed to a mixin are evaluated 
//in the scope where the block is defined, not in the 
//scope of the mixin. This means that variables local 
//to the mixin cannot be used within the passed style 
//block and variables will resolve to the global value:
.colors {
  @include colors { 
    color: $color; 
    }
}


//@function is custom function
$grid-width: 40px;
$gutter-width: 10px;

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

#sidebar { width: grid-width(5); }

SassMeister-output.css

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

#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

#main p:hover {
  font-weight: bold;
}

.container #main p {
  background: #red;
}

@media screen {
  #main p {
    width: 500px;
  }
}

.parent_child {
  color: red;
}

child_& {
  color: red;
}

/* this comment will stay output to css */
.y, .z {
  color: red;
}

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.testString1 {
  color: red;
  font-family: "Times New Roman";
}

.testString2 {
  color: "some invalid color";
}

.test:before {
  color: "red";
  content: "Hi, Firefox users!!!";
}

.useList1 {
  margin: 1px 2px 3px 4px;
  font-family: "Times New Roman", Georgia, Serif;
}

.useList2 {
  margin: 1px 2px 3px 4px;
  font-family: "Times New Roman", Georgia, Serif;
}

p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
  font: italic bold 10px/8px;
}

p {
  font: 12px / 30px;
  font: 0.4;
}

.sidebar {
  width: 300px;
}

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

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

p {
  color: green;
}

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

.shadows2 {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

* html {
  color: red;
}

* html #logo {
  font-size: 1em;
  background-image: url(/logo.gif);
}

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

#sidebar {
  width: 240px;
}