CODEWITHSUNDEEP
functionsasseachmixins
Touhid Rahman
Touhid Rahman

Reputation: 117

SASS List Not Working

I am trying to make a SASS list working but its giving me issue. Can any of you please guide me what I am doing wrong and show the solution?

$colors: #02ce53, #05d297, #10cbc2, #e45042, #fe7e10, #01a2f0 
@each $color in $colors
    p
        color: $color

My generated CSS looks like:

p {
  color: #02ce53; }

p {
  color: #05d297; }

p {
  color: #10cbc2; }

p {
  color: #e45042; }

p {
  color: #fe7e10; }

p {
  color: #01a2f0; }

I actually want each p tag to have the color based on color sequence mentioned in the SASS list. How can I have it?

Upvotes: 1

Views: 1099

Answers (1)

llobet
llobet

Reputation: 2790

Your can get the index of your list with index($list,$value) inside @each directive and use it as nth-child index:

$colors: #02ce53, #05d297, #10cbc2, #e45042, #fe7e10, #01a2f0

@each $color in $colors
  p:nth-child(#{index($colors, $color)})
    color: $color

This gives you the following:

p:nth-child(1) {
  color: #02ce53;
}

p:nth-child(2) {
  color: #05d297;
}

p:nth-child(3) {
  color: #10cbc2;
}

p:nth-child(4) {
  color: #e45042;
}

p:nth-child(5) {
  color: #fe7e10;
}

p:nth-child(6) {
  color: #01a2f0;
}

Upvotes: 1

Related Questions