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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)