Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="branding">
  
</div>
<div class="logo"></div>
<div class="logo"></div>
<h1>A Sass Demo</h1>
<p>Sass is a CSS extension language. It can also be thought of a CSS pre-processor.</p>

<ul>Reasons to love Sass: 
  <li>It makes writing CSS easier</li>
  <li>You can write CSS in a more modular way which is more maintainable.</li>
  <li>You can use variables!</li>
  <li>It makes CSS more powerful.</li>
</ul>

<button>Button</button>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

body {
  background-color: #ccc;
  color: #444;
  font-family: sans-serif;
  line-height: 1.5;
}

.logo {
  background-color: #349d9f;
  height: 100px;
  width: 100px;
  border-radius: 5px;
  float: left;
  margin: 0 50px 15px 0;
}

p {
  clear: both;
}

button {
  background-color: #349d9f;
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 10px;
  font-size: 1em;
}

SassMeister-output.css

body {
  background-color: #ccc;
  color: #444;
  font-family: sans-serif;
  line-height: 1.5;
}

.logo {
  background-color: #349d9f;
  height: 100px;
  width: 100px;
  border-radius: 5px;
  float: left;
  margin: 0 50px 15px 0;
}

p {
  clear: both;
}

button {
  background-color: #349d9f;
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 10px;
  font-size: 1em;
}

SassMeister-rendered.html

<div class="branding">
  
</div>
<div class="logo"></div>
<div class="logo"></div>
<h1>A Sass Demo</h1>
<p>Sass is a CSS extension language. It can also be thought of a CSS pre-processor.</p>

<ul>Reasons to love Sass: 
  <li>It makes writing CSS easier</li>
  <li>You can write CSS in a more modular way which is more maintainable.</li>
  <li>You can use variables!</li>
  <li>It makes CSS more powerful.</li>
</ul>

<button>Button</button>