SASS List Not Working

Question

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?

llobet · Accepted Answer · 2017-12-19T15:53:33.377

1

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;
}

edited Dec 19 '17 at 15:53

answered Dec 18 '17 at 17:06

llobet

2,672
23
36

Thanks, list is now working but exactly not how I want it to be. Generated, CSS is like: p { color: #02ce53; } p { color: #05d297; } p { color: #10cbc2; } p { color: #e45042; } p { color: #fe7e10; } p { color: #01a2f0; } But as you can understand, I want nth child of p tag to have the color of nth color...... Please help – Touhid Rahman Dec 19 '17 at 13:19
Sorry for my misunderstanding. Now I get your point. I edit my original answer. I hope this helps. – llobet Dec 19 '17 at 15:50
Thanks, it solved the issue :) By the way, is it possible to determine number of children of any container using any SASS function? – Touhid Rahman Dec 19 '17 at 20:48
Well, in SASS there are lists. You can use the length($list) list function. You can use it if you want to use “@for” instead of “@each” directive ( for example: “@for $i from 1 through length($list)” ). – llobet Dec 19 '17 at 22:33
Can you please help me find an answer here? https://stackoverflow.com/questions/47895004/is-it-possible-to-determine-number-of-children-of-any-container-using-any-sass-f/47895089?noredirect=1#comment82757637_47895089 – Touhid Rahman Dec 19 '17 at 22:40
Done, hope it helps, although it is not a SASS-only solution. – llobet Dec 21 '17 at 11:56

SASS List Not Working

1 Answers1