Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Advanced Sass Advanced Variables, Mixins, Functions, and Placeholders Better Variables with List-maps

Posted by Wendell Pulsipher
Wendell Pulsipher
10,183 Points

what does this sass list-maps error mean?

why do i get this error: $map: (("main-color" #d073d0), ("hover-color" #a637a6), ("border-color" #ffffff)) is not a map for `map-get'

$main: #d9d;
$menu-color: $main;
$menu: (
  main-color darken($menu-color, 10%),
  hover-color darken($menu-color, 30%),
  border-color lighten($menu-color, 40%)
);

.nav {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 60px;
  background-color: map-get($menu, main-color);

}

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Wendell,

Sass maps require colons after the key names whereas if they're not there it's declared as a list instead, see the below.

$menu: (
  main-color: darken($menu-color, 10%),
  hover-color: darken($menu-color, 30%),
  border-color: lighten($menu-color, 40%)
);
jo vo
PLUS
jo vo
Courses Plus Student 830 Points
jo vo
jo vo
Courses Plus Student 830 Points

The tutorial was made for sass 3.3 and back then you didnt need the semi colons. In 3.4.x (current version) you need the semicolon otherwise you get that error.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Thanks. I think you meant colons, though. Not trying to be nitpicky. Your comment was helpful.