Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Advanced Sass Advanced Variables, Mixins, Functions, and Placeholders Nesting

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

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.

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

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.