Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="colour colour1"></div>
<div class="colour colour2"></div>
<div class="colour colour3"></div>
<div class="colour colour4"></div>
<br/>
<div class="colour colour5"></div>
<div class="colour colour6"></div>
<div class="colour colour7"></div>
<div class="colour colour8"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

$colour1: #F39123;
$colour2: #CC1517;
$colour3: #4FADE3;
$colour4: #009245;

@function treatColor($colour, $saturate: 20%, $lighten: 10%) {
  $colour: saturate($colour, $saturate);
  $colour: lighten($colour,  $lighten);
  @return $colour;
}

$colour5: treatColor($colour1);
$colour6: treatColor($colour2);
$colour7: treatColor($colour3);
$colour8: treatColor($colour4);


.colour {
  width: 100px;
  height: 100px;
  display:inline-block;
}

.colour1 {background: $colour1;}
.colour2 {background: $colour2;}
.colour3 {background: $colour3;}
.colour4 {background: $colour4;}
.colour5 {background: $colour5;}
.colour6 {background: $colour6;}
.colour7 {background: $colour7;}
.colour8 {background: $colour8;}

SassMeister-output.css

.colour {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.colour1 {
  background: #F39123;
}

.colour2 {
  background: #CC1517;
}

.colour3 {
  background: #4FADE3;
}

.colour4 {
  background: #009245;
}

.colour5 {
  background: #ffaa4a;
}

.colour6 {
  background: #ff1518;
}

.colour7 {
  background: #6cc6f9;
}

.colour8 {
  background: #00c55d;
}

SassMeister-rendered.html

<div class="colour colour1"></div>
<div class="colour colour2"></div>
<div class="colour colour3"></div>
<div class="colour colour4"></div>
<br/>
<div class="colour colour5"></div>
<div class="colour colour6"></div>
<div class="colour colour7"></div>
<div class="colour colour8"></div>