Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
<span class="primary">#</span>
<span class="primary-l-1">#</span>
<span class="primary-l-2">#</span>
<span class="primary-l-3">#</span>
<span class="primary-l-4">#</span>
</div>

<div>
<span class="secondary">#</span>
<span class="secondary-l-1">#</span>
<span class="secondary-l-2">#</span>
<span class="secondary-l-3">#</span>
<span class="secondary-l-4">#</span>
</div>

<div>
<span class="tertiary">#</span>
<span class="tertiary-l-1">#</span>
<span class="tertiary-l-2">#</span>
<span class="tertiary-l-3">#</span>
<span class="tertiary-l-4">#</span>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

$primary: #F1682F;
$secondary: #F9A024;
$tertiary: #00A4A5;
$primary-l: (
 '1' : lighten($primary, 8.69%),
   '2' : lighten($primary, 17.3%),
    '3' : lighten($primary, 28.5%),
     '4' : lighten($primary, 36.5%)
);
$secondary-l: (
 '1' : lighten($secondary, 8.69%),
   '2' : lighten($secondary, 17.3%),
    '3' : lighten($secondary, 28.5%),
     '4' : lighten($secondary, 36.5%)
);
$tertiary-l: (
 '1' : lighten($tertiary, 8.69%),
   '2' : lighten($tertiary, 11.3%),
    '3' : lighten($tertiary, 14.5%),
     '4' : lighten($tertiary, 19.5%)
);

div {
  margin: 50px 0;
}

.primary {
  background: $primary;
}

.secondary {
  background: $secondary;
}

.tertiary {
  background: $tertiary;
}

.primary, .secondary, .tertiary {
  padding: 10px 15px;
  vertical-align: middle;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

@each $color, $val in $primary-l {
    .primary-l-#{$color}{
        padding: 10px 15px;
        vertical-align: middle;
        background: $val;
        color: #fff;
        font-family: 'Helvetica';
        font-weight: 300;
    }
}


@each $color, $val in $secondary-l {
    .secondary-l-#{$color}{
        padding: 10px 15px;
        vertical-align: middle;
        background: $val;
        color: #fff;
        font-family: 'Helvetica';
        font-weight: 300;
    }
}

@each $color, $val in $tertiary-l {
    .tertiary-l-#{$color}{
        padding: 10px 15px;
        vertical-align: middle;
        background: $val;
        color: #fff;
        font-family: 'Helvetica';
        font-weight: 300;
    }
}

SassMeister-output.css

div {
  margin: 50px 0;
}

.primary {
  background: #F1682F;
}

.secondary {
  background: #F9A024;
}

.tertiary {
  background: #00A4A5;
}

.primary, .secondary, .tertiary {
  padding: 10px 15px;
  vertical-align: middle;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.primary-l-1 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #f48659;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.primary-l-2 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #f7a482;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.primary-l-3 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #facbb7;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.primary-l-4 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #fde7dd;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.secondary-l-1 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #fab34f;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.secondary-l-2 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #fbc57a;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.secondary-l-3 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #fdddb1;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.secondary-l-4 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #feefd9;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.tertiary-l-1 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #00d0d1;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.tertiary-l-2 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #00dddf;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.tertiary-l-3 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #00eeef;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

.tertiary-l-4 {
  padding: 10px 15px;
  vertical-align: middle;
  background: #09feff;
  color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
}

SassMeister-rendered.html

<div>
<span class="primary">#</span>
<span class="primary-l-1">#</span>
<span class="primary-l-2">#</span>
<span class="primary-l-3">#</span>
<span class="primary-l-4">#</span>
</div>

<div>
<span class="secondary">#</span>
<span class="secondary-l-1">#</span>
<span class="secondary-l-2">#</span>
<span class="secondary-l-3">#</span>
<span class="secondary-l-4">#</span>
</div>

<div>
<span class="tertiary">#</span>
<span class="tertiary-l-1">#</span>
<span class="tertiary-l-2">#</span>
<span class="tertiary-l-3">#</span>
<span class="tertiary-l-4">#</span>
</div>