Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>
  <h1>Hello World!</h1>
</header>

<div class='container'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Praesent ultrices at arcu nec porttitor. Integer mattis est.
  eu turpis iaculis malesuada. Vivamus suscipit turpis nibh, ac posuere 
  lacus dictum sed. Fusce tristique ligula erat, sed congue velit volutpat in. 
  Quisque ut nunc at elit ornare rhoncus.<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Praesent ultrices at arcu nec porttitor. Integer mattis est.
  eu turpis iaculis malesuada. Vivamus suscipit turpis nibh, ac posuere 
  lacus dictum sed. gula erat, sed congue velit volutpat in. 
  Quisque ut nunc at elit ornare rhoncus.
  </p>
</div>

<footer>
  <p>All Rights Reserved &copy; 2014</p>
</footer>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// Color variables
$pomegranate: #c0392b;
$dark_pomegranate: darken($pomegranate, 10%);
$extradark_pomegranate: darken($pomegranate, 40%);

// Type variables
$times_font: "Times New Roman", Georgia, Serif;
$big_font: 56px;
$small_font: 10px;

// Layout variables
$padding: 10px;
$margin: 10px;

//Working with mixins
@mixin border($width:1px, $color:$pomegranate) {
	 border: $width solid $color;
}
@mixin radius ($radius:10px) {
	-webkit-border-radius: ($radius);
	-moz-border-radius: ($radius);
	-o-border-radius: ($radius);
	-ms-border-radius: ($radius);
	border-radius: $radius;
}

header {
  font-family: $times_font;
  background-color: lighten($pomegranate, 50%);
  border: 1px solid darken($pomegranate, 10%);
  color: $pomegranate;
  @include radius;
  @include border;
  
  h1 {
    font-size: $big_font;
  	padding: $padding;
  }
  
  a {
  	color: $dark_pomegranate;
    
    &:hover {
    
    color: $extradark_pomegranate;
    }

  }
}
.container {
  margin: $margin;
}
footer {
  font-size: $small_font+2;
  text-align: center;
 @include border(2px, $extradark_pomegranate);
 @include radius;

}

SassMeister-output.css

header {
  font-family: "Times New Roman", Georgia, Serif;
  background-color: #fbf0ef;
  border: 1px solid #962d22;
  color: #c0392b;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #c0392b;
}
header h1 {
  font-size: 56px;
  padding: 10px;
}
header a {
  color: #962d22;
}
header a:hover {
  color: #190806;
}

.container {
  margin: 10px;
}

footer {
  font-size: 12px;
  text-align: center;
  border: 2px solid #190806;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

SassMeister-rendered.html

<header>
  <h1>Hello World!</h1>
</header>

<div class='container'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Praesent ultrices at arcu nec porttitor. Integer mattis est.
  eu turpis iaculis malesuada. Vivamus suscipit turpis nibh, ac posuere 
  lacus dictum sed. Fusce tristique ligula erat, sed congue velit volutpat in. 
  Quisque ut nunc at elit ornare rhoncus.<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Praesent ultrices at arcu nec porttitor. Integer mattis est.
  eu turpis iaculis malesuada. Vivamus suscipit turpis nibh, ac posuere 
  lacus dictum sed. gula erat, sed congue velit volutpat in. 
  Quisque ut nunc at elit ornare rhoncus.
  </p>
</div>

<footer>
  <p>All Rights Reserved &copy; 2014</p>
</footer>