CODEWITHSUNDEEP
sassinterpolation
Abner Wang
Abner Wang

Reputation: 23

sass $ concatenate with interpolation

I have the following SASS variables:

$msg: #669bdf;
$msg-h:  #548ed8;
$msg-a: #3873be;
$suc: #1cBB9c;
$suc-h: #10b091;
$suc-a: #10947a;

How do I concatenate $ with interpolation without errors

@each $color in $color-list {
  .#{$color} {
    background-color: #{$#{$color}};
    &:hover {
      background-color: #{$#{$color}}-h;
    }
    &:active {
      background-color: #{$#{$color}}-a;
    }
  }
}

Upvotes: 1

Views: 82

Answers (1)

Evelijn
Evelijn

Reputation: 371

I think the following may work for you:

$color-list: (
  msg: (
  base: #669bdf,
  hover: #548ed8,
  active: #3873be
  ),
  suc: (
  base: #1cBB9c,
  hover: #10b091,
  active: #10947a
  )
);

@each $name, $colors in $color-list {
  .#{$name} {
    background-color: map-get($colors, base);
    &:hover {
      background-color: map-get($colors, hover);
    }
    &:active {
      background-color: map-get($colors, active);
    }
  }
}

Edit: You can't concatenate variables the way you want to, so that's why I came up with this solution.

Upvotes: 2

Related Questions