CODEWITHSUNDEEP
cssarrayssass
Sergio Andrade
Sergio Andrade

Reputation: 324

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.

Upvotes: 0

Views: 566

Answers (1)

Daisi
Daisi

Reputation: 2418

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

Upvotes: 1

Related Questions