SASS - Colour group for re-use

Question

I’m starting at SASS, and I’m having a little problem that I’m having trouble solving.

I have a group of colors, which will be used in several sessions of my site.

Basically, I have a structure like this:

<section id="lista-noticias" class="regioes">
  <ul>
    <li>
      <a href="#">
        <span class="data">SÁBADO, 17/05/2017, 20:07</span>
        <h5 class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quam dolore nemo itaque possimus? Dolore, doloribus corporis, voluptatibus, quasi necessitatibus hic quo quia rem, asperiores libero soluta. Eveniet, optio aspernatur.</h5>
      </a>
    </li>
  </ul>
</section>

I have my color list like this:

$cor-regioes: #b71c1c;
$cor-esporte: #1b5e20;
$cor-saude: #f57f17;
$cor-arte: #0d47a1;

What I would like to "automate" is that when I put the class "regions", the internal elements of that section would take the colors of my variable cor-regioes, like the a:hover, span, etc..

I tried so:

$cor-esporte: #1b5e20;
$cor-vida: #f57f17;
$cor-regioes: #b71c1c;

$cores: $cor-esporte, $cor-vida, $cor-regioes;

@mixin cor-elementos($cor) {
  a:hover, span.data {
    color: $cor
  }
}

@each $cor in $cores {
  section.#{$cor} {
    @include cor-elementos($cor);
  }
}

However, in Section, it takes as class, the color in HEXADECIMAL, and does not work.

Someone can give me a light?

Answer 1

As a suggested implementation, use the function map-get(), example:

$cores: ('cor-esporte' : #1b5e20,  'cor-vida': #f57f17, 'cor-regioes': #b71c1c );
$classes: cor-esporte cor-vida cor-regioes;

@mixin cor-elementos($cor) {
  a:hover, span.data {
    color: map-get($cores, '#{$cor}');
  }
}

@each $classe in $classes {
  section.#{$classe} {
    @include cor-elementos($classe);
  }
}

Answer 2

I got!!

For those who want, is the code below. It may be that there is some other way to do, but this I did, already served for me!

$cor-regioes: #FFCC00;
$cor-esporte: #CC0000;
$cor-vida: #CCBBCC;

@mixin config-icon-colors($colors...) {
  @each $i in $colors {

      .#{nth($i, 1)}{
        color: nth($i, 2);

        .data {
          color: nth($i, 2);
        }
        a:hover {
          h5 {
            color: nth($i, 2);
          }
        }
      }
   }
}

@include config-icon-colors(
'regioes' $cor-regioes,
'esporte' $cor-esporte,
'vida' $cor-vida);