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 Nesting

Posted by John Tasto
John Tasto
21,587 Points

Do Sass maps need a colon between keys and values?

In the video Nesting in the course "Advanced Sass", Dale does not use colons between keys and values, and it appears to produce the correct output. In the quiz following the video, the correct answer also does not have colons.

However, in the video Colors with Sass Maps from the course "Modular CSS with Sass", Guil does use colons. The official documentation also shows the use of colons between keys and values, with no indication that they are optional.

Are they optional? What would the formal syntax for that look like? Since both keys and maps can be any data type, if they were both lists, how would it know where the key ends and the value begins?

2 Answers

Taki mhd
PLUS
Taki mhd
Courses Plus Student 1,714 Points
Taki mhd
Taki mhd
Courses Plus Student 1,714 Points

To my knowledge, the syntax for a SASS maps is uses colons to map keys and values, and commas to separate key/value pairs.

  • Maps must be enclosed with parenthesis.
  • They have to be comma separated.
  • Both, key and value, can be any sass object.

Here is a valid example 

           $map: (
  key: value,
  other-key: other-value
);

So to answer your question, yes there needs to be a colon between a key and a value.

John Tasto
John Tasto
21,587 Points

That's what I read too, but why does Dale consistently not use colons in the "Advanced Sass" course, which appears to work just fine?

Anthony Attard
Anthony Attard
43,915 Points
Anthony Attard
Anthony Attard
43,915 Points

Both must be valid. Not sure though. Confusing as one of the quizzes asks whether it has a colon or not and the correct answer is the option without a colon and just a space between the key and value.