CODEWITHSUNDEEP
arrayssass
Bryce
Bryce

Reputation: 6610

Sass nested list appears to be using nested values at root level

I have a Sass array (a "list") that has two items. Each item is itself a list with two items. However, when testing the length of the parent list, I get some very strange behaviour:

$array: (
    ('a', 'b','c'),
    ('d','e','f')
);

* { length: length($array); }
// -> length: 2

vs:

$array: (
    ('a', 'b','c')
);

* { length: length($array); }
// -> length: 3

Why does Sass appear to be using the inner list if the outer list only has one value?

Upvotes: 1

Views: 124

Answers (1)

Alex Guerrero
Alex Guerrero

Reputation: 2149

You should add a trailing comma to represent a nested list with a single element. From SASS reference:

Comma-separated lists may have a trailing comma. This is especially useful because it allows you to represent a single-element list. For example, (1,) is a list containing 1 and (1 2 3,) is a comma-separated list containing a space-separated list containing 1, 2, and 3.

So, in your case, this would be the code:

$array: (
  ('a', 'b','c'),
):

You can also use these alternatives:

// Alternative 1
$array: 'a' 'b' 'c',;

// Alternative 2
$array: ();
$array: append($array,('a', 'b','c'));

Upvotes: 1

Related Questions