Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo"></div>

SassMeister-input.scss

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

// variables
//Colors
$primary-color: #fb445a;
$secondary-color: #83d6b7;

//Font Families
$arial: Arial, Helvetica, sans-serif;
$comic: "Comic Sans MS", cursive, sans-serif;

//////////Variables end/////////////

.bar {
    background-color: $primary-color;
    width: 100%;
    border-radius: 5px;
  }
  
.foo {
  background-color: lighten($primary-color, 10%);
  padding: 5em;
  width: 50%;
}
////////Nesting End///////////

SassMeister-output.css

.bar {
  background-color: #fb445a;
  width: 100%;
  border-radius: 5px;
}

.foo {
  background-color: #fc7686;
  padding: 5em;
  width: 50%;
}

SassMeister-rendered.html

<div class="foo"></div>