a precess production

precess-input-1431964929.scss

//@mixin
//defines complex variables
@mixin shadow-original{
	box-shadow: 1px 1px 0px #ddd;
  	text-shadow: 1px 1px 1px #000;
}
@mixin shadow($offset){
	box-shadow: $offset $offset 0px #ddd;
  	text-shadow: $offset $offset $offset #000;
}

//@include
//calls/implements mixins

.box{
  @include shadow(2px);
}

.bigger-box{
  @include shadow(2px);
}



//@extend
.square{
	width: 100px;
  	height: 100px;
  	background: blue;
}
.circle{
 @extend .square;
  border-radius: 100%;
}

precess-output-1431964929.css

.box {
  box-shadow: 2px 2px 0px #dddddd;
  text-shadow: 2px 2px 2px black;
}

.bigger-box {
  box-shadow: 2px 2px 0px #dddddd;
  text-shadow: 2px 2px 2px black;
}

.square, .circle {
  width: 100px;
  height: 100px;
  background: blue;
}

.circle {
  border-radius: 100%;
}