Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
    <p><span>S</span>yntactically</p>
    <p><span>A</span>wesome</p>
    <p><span>S</span>tyle</p>
    <p><span>S</span>heets</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

*{
    font-size: 48px;
    margin: 0;
    font-family: Helvetica;
    background-color: #505050;
    color: white;
}
 div{
     position: absolute;
     top: 10%;
     left: 40%;
 }
span{
    color: red;
}

SassMeister-output.css

* {
  font-size: 48px;
  margin: 0;
  font-family: Helvetica;
  background-color: #505050;
  color: white;
}

div {
  position: absolute;
  top: 10%;
  left: 40%;
}

span {
  color: red;
}

SassMeister-rendered.html

<div>
    <p><span>S</span>yntactically</p>
    <p><span>A</span>wesome</p>
    <p><span>S</span>tyle</p>
    <p><span>S</span>heets</p>
</div>