How to create a multiline map in SASS/SCSS

Posted . Visible to the public.

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

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

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.

Max E.
Last edit
Max E.
License
Source code in this card is licensed under the MIT License.
Posted by Max E. to makandra dev (2023-05-17 12:52)