Sergio Andrade Sergio Andrade - 1 month ago 10
Sass (Sass) Question

sass array with @for?

I would like make a array with a loop in sass, but i don't know is possible.
There is my expected output:

$light: #fff;
$gray: (
darken($light, 1%),
darken($light, 2%),
darken($light, 3%),
darken($light, 4%),
darken($light, 5%),
darken($light, 6%),
darken($light, 7%),
darken($light, 8%)
);


And this is my actual code:

$light: #fff;
$gray: (
@for $i from 1 through 8 {
darken($light, $i%),
}
);


P.S. This not working.

Answer

You shouldn't be looping in the list.
Create a list $gray.
Inside a loop, append the colours to the $gray list.

$light: #fff;
$gray: ();

@for $i from 1 through 8 {
  $gray: append($gray, darken($light, $i) );
}

$gray now holds 8 different colours

div {
   /* Access the entire list or array */
   color: $gray;
}

p {
  /* Access individual item from list or array */
  color: nth($gray, 5) /* where 5 is the index. Indexes start from 1 and NOT 0 */
}

compiles to the following css

div {
  color: #fcfcfc #fafafa #f7f7f7 whitesmoke #f2f2f2 #f0f0f0 #ededed #ebebeb; }

p {
  color: #f2f2f2; }
Comments