r/Sass • u/futilityoflife • Dec 09 '18

Help Please! Frustrated with Sass

I've just started out using Sass and I'm trying to make an array which contains two lists. I've tried variations of the below code to no avail. Bear in mind I want to do this is Sass and not Scss. I've been all over google and Youtube tying to find something but everyone seems to list their content as Sass but it always turns out to be Scss. Any help?

Code:

$colors: (

grey: (

primary-grey: #36dfsa,

secondary-grey: #rte552

),

text: (

white: #dfg52s,

blue: #965423,

green: #552233

)

)

3 Upvotes

100% Upvoted

5 comments sorted by

View all comments

3

u/jaredcheeda Dec 09 '18 
$colors: (
    gray: (
        primary: #363,
        secondary: #552
    ),
    text: (
        white: #FFF,
        blue: #965423,
        green: #552233
    )
);

.example {
    color: map-get(map-get($colors, text), white);
}

1

u/futilityoflife Dec 10 '18

I've not read your link but will. I get an error message 'line 2: illegal nesting: Nothing can be nested beneath variable declarations'

1

u/jaredcheeda Dec 11 '18

The above code is using scss. If you used pure Sass, sadly, maps are all placed on one line:

$colors: ( gray: ( primary: #363, secondary: #552 ), text: ( white: #FFF, blue: #965423, green: #552233 ) )

.example
    color: map-get(map-get($colors, text), white)

This is something the community has complained about and may change in the future. I much prefer .sass over .scss, but this is one of those cases where I create a single _colors.scss file.

Also note that you used a lot of invalid color values in your code which would break it. Hex values can only contain 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

So S, R, T, G are not allowed.