Read more

How to create a multiline map in SASS/SCSS

Max E.
May 17, 2023Software engineer at makandra GmbH

If you want to to create maps within SASS/SCSS-files, it normally works like this:

$some-map: (key1: value1, key2: value2)
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

However, some maps can get big really fast, if they are being used to contain all of the project's icon names and their sizes for example.
Therefore splitting a map into multiple lines, like we do it in Ruby with big hashes, would become really handy.

Unfortunately SASS doesn't support multiline maps. There has been an open issue Show archive.org snapshot since 2011 and it hasn't been resolved since then.

Writing a map likes this:


$some-map: (
  key1: value1,
  key2: value2
)

confuses the SASS-parser and you will get an error like ERROR: unclosed parenthesis.

So the easiest way to create multiline maps is to convert your .sass file into a .scss file. Everything else can stay the same.

Posted by Max E. to makandra dev (2023-05-17 14:52)