Multiline declaration of maps in SASS

[idflood]

Looking at the documentation and commits I see many examples of maps but always in scss syntax. The multiline declaration is really scalable and clear so I would like to use somthing similar in sass.

For instance this scss syntax:

$layout: (
  columns: 12,
  gutters: 20px
);

In sass I have only found a "one line" syntax. Eventually with a lot of properties this become unreadable.

$layout: (columns: 12, gutters: 20px, ...)

Is there an existing syntax for multiline map declaration in .sass?

[lolmaus]

There's a number of issues with the indented syntax, and Sass maintainers aren't going to fix them. :( They say, the .sass parser is weird and hard to refactor.

I find Sass syntax to be quicker to type and easier to read. It is deprived of the visual noise:

It's also much easier to do copy-pasting.

So Sass maintainers, PLEASE don't let the indented syntax fall behind!

[gisu]

I love the indented syntax, but i switch more and more too the 'ugly' Syntax, because the Syntax have more and more Problems.

New Member in the Team or Freelancers that never have worked with SASS, have problem with "WTF why i get compile errors!?!?!%§$!"
SassScript Maps are hard to read in the indented syntax. Goto Definition in Sublimetext will not work with indented syntax (because the Parser have problems when he didn't find curly braces).

In Libsass itself you have no indented Syntax, so i work with braces and hatefull semicolons.

[nex3]

Duplicate of #216.

This is definitely something I'd like to add, but it would take a considerable amount of effort due to the refactoring of the indented syntax that would be required. Right now that's just lower priority than adding features that benefit everyone.

[ezekg]

@nex3 how much refactoring are we talking about here? Would you mind pointing me to the relevant files so that I could take a look? I was going to make the switch to the indented syntax, but this was kind of a deal breaker since we use maps a lot. We're using Coffee and MtHaml, so wanted to keep the indented syntax consistent throughout our development stack.

[nex3]

@ezekg Basically the entire indented-syntax parser would have to be rewritten from the ground up to handle this correctly. It's a major task, but if you want to take a look, the current parser is in lib/sass/engine.rb.

[ghost]

I noticed this issue just recently and it was a real draw back from using the indented version of sass. A recent solution i've been using to get over this is to store any maps in a separate .scss file, and then import that file into my .sass document. This allows the maps to be visually organized and still be usable inside of the indented version. I thought i'd post this solution to help anybody who loves the indented flavor but hates this issue.

[CREEATION]

Thanks @theknightsky!
Previously I did it like this:

$map: ("key01": "value01")
$map: map-merge($map, ("key02": "value02"))
$map: map-merge($map, ("key03": "value03"))
$map: map-merge($map, ("key04": "value04"))

But your solution is much cleaner, obviously. =)

[iErik]

Honestly, what's the point of maintaining a syntax that you basically don't want people to use? It's kind of frustrating for people who prefer the cleaner indented syntax but basically every single developer discourage its use and the maintainers don't even bother with it anymore. Just drop the support altogether and make people use the .scss syntax

[dmyur]

Hey there. Recently I've discovered CoffeeScript and in order to be consistent with it I wanted to use indented syntax in styles too… but super long map one-liners are awful, they are vaporizing my optimistic view on sass. What a pity that we can't have nicer syntax :-(

[maciej-ka]

Hi. There is good chance, that the next version of sass will introduce such solution:

.shadow
  box-shadow:           \
    5px 5px 10px black, \
    inset 0 0 10px white

[matthewjumpsoffbuildings]

whats the status of this? i really prefer the indented sass syntax but the lack of multiline maps (and even multiline arguments on mixins) is really frustrating sometimes

for example when calling a mixin

+some-mixin(
    arg1
    arg2
    arg3
)

something like that would be so much nicer. or even something like this:

+some-mixin:
    arg1
    arg2
    arg3

[maciej-ka]

It was on freeze because ruby-sass project had no maintainer. Not sure how is it now.

[alxmagro]

Still without a solution?

[FrankNewII]

Most laconic way in current situation:

$deconstructed_pictures: ()

@function dp_oma()
  $path: '../img/deconstructed-pictures/our_main_areas/'
  $dp__oma__1: ( $path + '1.1.png' $path + '1.2.png' $path + '1.3.png' )
  $dp__oma__2: ( $path + '2.1.png' $path + '2.2.png' $path + '2.3.png' )
  $dp__oma__3: ( $path + '3.1.png' $path + '3.2.png' $path + '3.3.png' )
  @return ("oma": ( 'computer-vision' : $dp__oma__1 ) ( 'reinforcement-learning' : $dp__oma__2 ) ( 'natural-languages' : $dp__oma__3 ))

@function dp_anotherPart()
  $path: '../img/deconstructed-pictures/our_main_areas/'
  $dp__oma__1: ( $path + '1.1.png' $path + '1.2.png' $path + '1.3.png' )
  $dp__oma__2: ( $path + '2.1.png' $path + '2.2.png' $path + '2.3.png' )
  $dp__oma__3: ( $path + '3.1.png' $path + '3.2.png' $path + '3.3.png' )
  @return ("oma": ( 'computer-vision' : $dp__oma__1 ) ( 'reinforcement-learning' : $dp__oma__2 ) ( 'natural-languages' : $dp__oma__3 ))

$deconstructed_pictures: map_merge($deconstructed_pictures, dp_oma())
$deconstructed_pictures: map_merge( $deconstructed_pictures, dp_anotherPart())

[Aeonexe]

The closest aproach is that you can include a .scss file with your multiline maps in a .sass file

|─ sass/
|   ├─ main.sass
|   ├─ _some_style.sass
|   ├─ _maps.scss

// main.sass
@import some_style
@import maps

// _maps.scss
$map: (
	"uno": "dos",
	"tres": "cuatro"
);