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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show 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 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)