Generated by SassMeister.com.

SassMeister-input-HTML.haml

.map
  this is a map
  
.box
  .controller
    this is a controller

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

*
  box-sizing: border-box

html, body
  height: 100%

.map
  width: 100%
  height: 100%
  background-color: orange
  
.box
  position: absolute
  top: 40px
  left: calc(50% - 30em)
  
.controller
  width: 60em
  height: 100px
  background-color: blue
  border-radius: 10px
  margin: 0 auto

SassMeister-output.css

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
  background-color: orange;
}

.box {
  position: absolute;
  top: 40px;
  left: calc(50% - 30em);
}

.controller {
  width: 60em;
  height: 100px;
  background-color: blue;
  border-radius: 10px;
  margin: 0 auto;
}

SassMeister-rendered.html

<div class='map'>
  this is a map
</div>
<div class='box'>
  <div class='controller'>
    this is a controller
  </div>
</div>