How to refer SASS variable

Question

I have this in my SASS:

$colors: (
  primary:    #f6861f,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

If I use

.menu-inner .scroll-content{
    background: $colors['primary'];
}

it doesn't work. How do I refer to primary inside my $colors array?

Chris · Accepted Answer · 2017-05-08 10:26:57Z

3

Your syntax isn't quite right - you can't use C-style associative arrays with SASS; you need to use the map-get function instead.

In your example, to access the primary colour you would do this:

.menu-inner .scroll-content {
    background: map-get($colors, primary);
}

There's some more info on SASS maps in these articles.

answered May 8, 2017 at 10:26

Chris

4353 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1