Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
<div class="div10"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$night: #334455;

$apricot: #ed8a2f;

$myColor: $apricot;

@for $i from 1 through 10{
  .div#{$i}{
    background-color: mix(black, $myColor, percentage(($i - 1) / 10 ) );
  }
}


div{
  height:50px;
  width:50px;
  float: left;
  margin: 10px;
  color:rgba(0, 0, 0, 0.1) ;
}

SassMeister-output.css

.div1 {
  background-color: #ed8a2f;
}

.div2 {
  background-color: #d57c2a;
}

.div3 {
  background-color: #be6e26;
}

.div4 {
  background-color: #a66121;
}

.div5 {
  background-color: #8e531c;
}

.div6 {
  background-color: #774518;
}

.div7 {
  background-color: #5f3713;
}

.div8 {
  background-color: #47290e;
}

.div9 {
  background-color: #2f1c09;
}

.div10 {
  background-color: #180e05;
}

div {
  height: 50px;
  width: 50px;
  float: left;
  margin: 10px;
  color: rgba(0, 0, 0, 0.1);
}

SassMeister-rendered.html

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
<div class="div10"></div>