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;




.div1{
   background-color: ($myColor);
}
.div2{
  background-color: mix(black, $myColor, 10%);
}
.div3{
  background-color: mix(black, $myColor, 20%);
}
.div4{
  background-color: mix(black, $myColor, 30%);
}
.div5{
  background-color: mix(black, $myColor, 40%);
}
.div6{
  background-color: mix(black, $myColor, 50%);
}
.div7{
  background-color: mix(black, $myColor, 60%);
}
.div8{
  background-color: mix(black, $myColor, 70%);
}
.div9{
  background-color: mix(black, $myColor, 80%);
}
.div10{
  background-color: mix(black, $myColor, 90%);
}


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>