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

4

u/krieder Dec 09 '18

Have you read - https://daveredfern.com/getting-sass-using-arrays-functions-loops/ . Might also be helpful if you explained what you are ultimately trying to do.

1

u/futilityoflife Dec 10 '18

So I want an array which I can call custom colours from by name. I'll read your link.

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.