Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="relative">
  relative
  <div class="absolute">
    absolute
  </div>
</div>

<div class="center-div">
  div centered with 500px width
</div>

SassMeister-input.scss

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

@import "compass";

// body{width: 700px;margin: 0 auto;padding: 20px;}

.relative{
  position: relative;
  width: 400px;
  height: 100px;
  border: 1px solid red;
  .absolute{
    background: #000;
    color: #fff;
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.center-div{
  width: 500px; 
  margin: 0 auto;
  border: 1px solid red;
  padding: 20px;
}

SassMeister-output.css

.relative {
  position: relative;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}
.relative .absolute {
  background: #000;
  color: #fff;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.center-div {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  padding: 20px;
}

SassMeister-rendered.html

<div class="relative">
  relative
  <div class="absolute">
    absolute
  </div>
</div>

<div class="center-div">
  div centered with 500px width
</div>