CODEWITHSUNDEEP
csssass
Matt
Matt

Reputation: 649

@mixin with $variables as params inside a @for loop SASS SCSS

I have a very challenging code for SASS SCSS lovers.

my code and loop challenge:

@for $i from 1 through 8 {
    &.-overlay-#{$i} {
        @include box-shadow($brand-color-#{$i});
    }
}

The mixin ( what inside doesn't matters )

@mixin box-shadow($color: $black) {
    box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}

The list of colors ( I do have 8 colors )

$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green; ... so on

The $brand-color-XX variable is passed to the @mixin

What I want to do is, create with @for loop these variations:

.-overlay-1 .-overlay-2 .-overlay-3 ...so on

But that @for is not working at the moment, what do am I missing here?

Regards

M

Upvotes: 0

Views: 1416

Answers (1)

Ari
Ari

Reputation: 1703

The @for was working, but you were trying to use variables in a way they're not meant to be used. You can't combine 2 SASS/SCSS variables to make one. You don't have a variable called $brand-color- so the compiler didn't know what to do with that. But you can get the result you want with a list.

DEMO

$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green;

$colors: $brand-color-1, $brand-color-2, $brand-color-3;

@mixin box-shadow($color: $black) {
    box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}

@for $i from 1 through length($colors) {
    .-overlay-#{$i} {
        @include box-shadow(nth($colors, $i));
    }
}

You said the result you wanted was, .-overlay-1 .-overlay-2 .-overlay-3 ...so on, so I'm not sure what you were doing with the &. The & is used to refer to the parent class. If you want to nest your created classes, you can do that too...

.cool {
    @for $i from 1 through length($colors) {
        .-overlay-#{$i} {
            @include box-shadow(nth($colors, $i));
        }
    }
}

...or put them at the same level as the parent...

.cool {
  @for $i from 1 through length($colors) {
      &.-overlay-#{$i} {
          @include box-shadow(nth($colors, $i));
      }
  }
}

...or create a different class

.cool {
  @for $i from 1 through length($colors) {
      &-overlay-#{$i} {
          @include box-shadow(nth($colors, $i));
      }
  }
}

Upvotes: 3

Related Questions