Cacher is the code snippet organizer for pro developers

$list: 

(
    theme1: (color: red, background: green, font: (family: Arial, size: 20px)),
    theme2: (color: black, background: white, font: (family: Verdana, size: 30px))

);


$oldList: 
(
    1: (red, blue),
    2: (brown, gold)
);


    @each $index, $row in $oldList
    {
        // $color: map-get($row, color) !global;
        // $background: map-get($row, background) !global;
        // $font: map-get($row, font);

        // $fontFamily: map-get($font, family);


        .theme-#{$index} 
        {
            $c1: nth($row, 1);
            $c2: nth($row, 2);
           // font-family: $fontFamily;
           color: $c1;
           background: $c2;
        }
    }

	<div class="container">
		
		<div class="a">1</div>
		<div class="b">2</div>

		<div class="c">
			
			<div>3.1</div>
			<div>3.1</div>
			<div>3.1</div>

		</div>

	</div>

.section_1 header {
  background-color: #000000;
  border-right: 2px dotted #000011;
}

.section_2 header {
  background-color: #000011;
  border-right: 2px dotted #000022;
}

.section_3 header {
  background-color: #000022;
  border-right: 2px dotted #000033;
}

.section_4 header {
  background-color: #000033;
  border-right: 2px dotted #000044;
}

.section_7 header {
  background-color: #000044;
  border-right: 2px dotted #000055;
}

.section_8 header {
  background-color: #000055;
  border-right: 2px dotted #000066;
}

.section_9 header {
  background-color: #000066;
  border-right: 2px dotted #000077;
}

.section_10 header {
  background-color: #000077;
  border-right: 2px dotted #000088;
}

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

$colourList: (
    1  : (#000000, #000011), 
    2  : (#000011, #000022), 
    3  : (#000022, #000033), 
    4  : (#000033, #000044), 
    7  : (#000044, #000055), 
    8  : (#000055, #000066), 
    9  : (#000066, #000077), 
    10 : (#000077, #000088), 
);


@each $index, $keyNumber in $colourList {
    $background: nth($keyNumber, 1);
    $lowlight: nth($keyNumber, 2);
    header {
        .section_#{$index} & {
            background-color: $background;
            border-right: 2px dotted $lowlight;
        }
    }
}

	<div class="container">
		
		<div class="a">1</div>
		<div class="b">2</div>

		<div class="c">
			
			<div>3.1</div>
			<div>3.1</div>
			<div>3.1</div>

		</div>

	</div>