CODEWITHSUNDEEP
sass
MeltingDog
MeltingDog

Reputation: 15424

How do I actually apply values from SASS List/Maps to elements?

I've inherited a project and it has a variable list/map in its scss file, which has:

$palette: (
  success: #53a646,
  warning: #faa41a,
  alert: #ec5840,
);

I want to use one of these variables (warning) and apply it to an element. I've googled but have not been able to find a way to apply it.

I've seen examples like:

.warning-btn {
 background-color: nth($palette, 2); 
}

But this isn't working for me.

Would anyone know the correct way of applying the variable to an element?

Upvotes: 0

Views: 37

Answers (1)

Geeky
Geeky

Reputation: 7496

change your code to the following

$palette: (
  success: #53a646,
  warning: #faa41a,
  alert: #ec5840,
);
.warning-btn {
 background-color:#{map-get($palette,warning)}
}

Hope it helps

Upvotes: 2

Related Questions