SASS - Color group for reuse

Question

SASS - Color group for reuse

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm starting in SASS, and I have a problem that I can not solve.

I have a color group, 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 list of colors 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 class "regions", the internal elements of that section would pick up the colors of my cor-regioes variable, such as a:hover , span etc.

I've tried it like this:

$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 the section, it takes as class, the color in HEXADECIMAL, and it does not work.

Can someone give me a light?

css css3 sass

asked by anonymous 29.05.2017 / 18:00

2 answers

Python3 does not accept file.name Is there a way to change a default program by java, cmd, or regedit?

score 1 · Answer 1

As a suggested implementation, use the 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);
  }
}

score 0 · Answer 2

I got it !!

For those who want, the code is below. It may be that there is some other way to do it, but this one I did, it already worked 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);