CODEWITHSUNDEEP
sassscss-mixins
Chris Pink
Chris Pink

Reputation: 2027

SCSS @each nesting colours

I have a series of selectors for colouring up days of the week

I'd like to do;

$saturday : blue;
$sunday : green;
...
$friday : red;

$days : saturday, sunday, ... friday;
@each $day in $days {
  .day-{$day}  {
    background: rgba(${$day}, 0.15);
    & .weekday {
      background: ${$day};
    }
  }
}

but it doesn't work (won't compile).

Is this kind of nesting simply not possible in SCSS? or is my syntax wrong?

Upvotes: 0

Views: 73

Answers (1)

Arkellys
Arkellys

Reputation: 7780

Some parts of your code are a bit unclear so I will assume that what you are trying to do should be more like the following:

$days : (
  saturday: blue,
  sunday: green,
  ...
  friday: red
);

@each $day, $color in $days {
  .day-#{$day}  {
    background: rgba($color, 0.15);
    & .weekday {
      background: $color;
    }
  }
}

One notable mistake in your code is the bad syntax of your interpolations which should be write as #{$variable} and not ${$variable} or {variable}. Also, it is not required that you interpolate everything, you can look at the documentation to get a better understanding about this.

Then, since you need to associate days with colors you should use a map instead of a list. Using the @each loop let you access each values so you can use them where you need in the code.

Upvotes: 1

Related Questions