Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="header">
  header
</div>

<div class="container">
  container
</div>

<div id="footer">
  footer
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

////////////////////////////////////////
// SCSS 플레이스홀더(Placeholder) 선택자
////////////////////////////////////////
%center-position {
	margin: {
		left: auto;
		right: auto; }
}

%clearfix {
	&:before,
	&:after {
		content: "";
		display: table; }
	&:after {
		clear: both; }
}

////////////////////////////////////////
// 글로벌 변수
////////////////////////////////////////
$grid-gutter-width: 20px;

////////////////////////////////////////
// 믹스인
////////////////////////////////////////
@mixin container-fixed() {
	// 지역 변수
	$half-grid-gutter: $grid-gutter-width / 2;
	// 플레이스홀더 선택자 %center-position, %clearfix 상속
	@extend %center-position;
	@extend %clearfix;
	// 패딩 좌,우 거터 절반 값 설정
	padding: {
		left: $half-grid-gutter;
		right: $half-grid-gutter;
	}
}

////////////////////////////////////////
// Page Design
////////////////////////////////////////
body {
  font: 22px/2 Helvetica, Arial;
  color: #fff;
  text-align: center; }
  
#header {
  @include container-fixed();
  max-width: 900px; 
  height: 30vh;
  background: #fa7ab3; }

.container {
	// 믹스인 container-fixed 호출
	@include container-fixed();
	max-width: 800px; 
	height: 50vh;
	background: #f6a4d1; }

#footer {
  @include container-fixed();
  max-width: 700px; 
  height: 15vh;
  background: #99356d; }

SassMeister-output.css

#header, .container, #footer {
  margin-left: auto;
  margin-right: auto;
}

#header:before, .container:before, #footer:before, #header:after, .container:after, #footer:after {
  content: "";
  display: table;
}
#header:after, .container:after, #footer:after {
  clear: both;
}

body {
  font: 22px/2 Helvetica, Arial;
  color: #fff;
  text-align: center;
}

#header {
  padding-left: 10px;
  padding-right: 10px;
  max-width: 900px;
  height: 30vh;
  background: #fa7ab3;
}

.container {
  padding-left: 10px;
  padding-right: 10px;
  max-width: 800px;
  height: 50vh;
  background: #f6a4d1;
}

#footer {
  padding-left: 10px;
  padding-right: 10px;
  max-width: 700px;
  height: 15vh;
  background: #99356d;
}

SassMeister-rendered.html

<div id="header">
  header
</div>

<div class="container">
  container
</div>

<div id="footer">
  footer
</div>