Generated by SassMeister.com.

SassMeister-input.scss

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

$image-path: "../img/";

  
/**
 * Tracking double lists that you want to line up?
 * Dale has a solution: http://blackfalcon.roughdraft.io/4615645
 */

$color_maca: rgb(124,23,10); 
$color_chia: rgb(14,223,110); 
$color_amaranto: rgb(59,33,50);
$color_stevia: rgb(9,33,50);

/*$brand_names: chia amaranto spiroulina camucamu canamo maca lucuma stevia quinoa alfalfa quinoa trigoverde algarroba cardomariano linodorado fresa coco gymtonic delifiber brainshake andeanprotein macuchino royalbreakfast;
*/
$brand_names: maca chia amaranto stevia;
$brand_colors: $color_maca $color_chia $color_amaranto $color_stevia;

@each $brand in $brand_names {
    $i: index($brand_names, $brand);
    .cpt-#{$brand} {
        background-color: nth($brand_colors, $i);
        background-image: url(#{$image-path}bg_#{$brand}.svg);
    }
}

SassMeister-output.css

/**
 * Tracking double lists that you want to line up?
 * Dale has a solution: http://blackfalcon.roughdraft.io/4615645
 */
/*$brand_names: chia amaranto spiroulina camucamu canamo maca lucuma stevia quinoa alfalfa quinoa trigoverde algarroba cardomariano linodorado fresa coco gymtonic delifiber brainshake andeanprotein macuchino royalbreakfast;
*/
.cpt-maca {
  background-color: #7c170a;
  background-image: url(../img/bg_maca.svg);
}

.cpt-chia {
  background-color: #0edf6e;
  background-image: url(../img/bg_chia.svg);
}

.cpt-amaranto {
  background-color: #3b2132;
  background-image: url(../img/bg_amaranto.svg);
}

.cpt-stevia {
  background-color: #092132;
  background-image: url(../img/bg_stevia.svg);
}