Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.cup {
  $cup-colour: #0000ff; // variables have scope!
	color: $cup-colour;

	&__milk {  // __ describes an element contained within it's parent
		liquid: milk;
		calcium: 10g;

		&--chocolate { // -- describes a modification from the parent
			flavour: chocolate;
			/* only the things that make it different from .cup__milk */
		}

		&__straw {
			color: $cup-colour;
		}
	}
}

// Comments written like this will not be visible in the compiled CSS
// even when non-minified, which is pretty useful if you ask me
	
.standard_css_stuff {
  /* You can literally just write normal oldschool CSS
     in your .sass files and it'll work just fine!*/ 
}

.canItDoMaths_fuckYesItCan {
  width: 30px * 2;
  
  $margin: 100px;
  margin-left: $margin - 10px;
}

.these {
  .items {
    .are {
      .nested {
        color: blue;
      }
      .together {
        color: red;
      }
    }
  }
}


/* Advanced stuff for future reference, don't worry about these though */

// You can use & in clever ways ..
h1 {
  &, a {
    color: white;
  }
}

.listing {
  & + & {
    margin-left: 10px;
  }
  
  .footer & {
    background: green;
  }
}

// You can extend classes  .. 
.milk { color: white; }

.yoghurt {
  @extend .milk;
  thickness: gloopy;
}

SassMeister-output.css

.cup {
  color: #0000ff;
}
.cup__milk {
  liquid: milk;
  calcium: 10g;
}
.cup__milk--chocolate {
  flavour: chocolate;
  /* only the things that make it different from .cup__milk */
}
.cup__milk__straw {
  color: #0000ff;
}

.standard_css_stuff {
  /* You can literally just write normal oldschool CSS
     in your .sass files and it'll work just fine!*/
}

.canItDoMaths_fuckYesItCan {
  width: 60px;
  margin-left: 90px;
}

.these .items .are .nested {
  color: blue;
}
.these .items .are .together {
  color: red;
}

/* Advanced stuff for future reference, don't worry about these though */
h1, h1 a {
  color: white;
}

.listing + .listing {
  margin-left: 10px;
}
.footer .listing {
  background: green;
}

.milk, .yoghurt {
  color: white;
}

.yoghurt {
  thickness: gloopy;
}