CODEWITHSUNDEEP
websass
frontendstu
frontendstu

Reputation: 103

Sass Map and For Loop Not Compiling

I'm having some issues trying to get my Sass @for loop to work with a map of spacer value variables I have set.

Usually the below code will work, not sure if it's my unrested mind or if there is actually something I have done incorrectly.

Here's my Sass map:

$spacer:   1rem;

$spacers:(
   0: 0,
   1: ($spacer * .25),
   2: ($spacer * .5),
   3: $spacer,
   4: ($spacer * 1.5),
   5: ($spacer * 3),
   6: ($spacer * 4)
);

Here's the for loop I'm trying to get to work:

@for $i from 0 through 6 {
   .padd-top-#{$i} {
      padding-top: map-get($spacers, #{$i});
   }
}

I have tried turning the compiler off and on again as sometimes this can cause problems.

Upvotes: 0

Views: 421

Answers (1)

ReSedano
ReSedano

Reputation: 5060

You are working with numbers, don't use interpolation syntax: #{ } 

$spacer:   1rem;

$spacers:(
   0: 0,
   1: $spacer * .25,
   2: $spacer * .5,
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
   6: $spacer * 4
);

@for $i from 0 through 6 {
   .padd-top-#{$i} {
      padding-top: map-get($spacers, $i);
   }
}

Upvotes: 1

Related Questions