CODEWITHSUNDEEP
ionic-frameworksassionic2
Ka Mok
Ka Mok

Reputation: 1988

How to access nested SASS variables?

Several colors in this .scss file are defined as such:

$colors: (
  primary :   #cd0e11,
  secondary:  #23aa0b,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

How do I access them? Say I want to set something to primary.

I tried:

h1 {
color: $colors:primary
}

This is Ionic 2, so it could be a framework specific thing.

Upvotes: 7

Views: 3308

Answers (3)

FNunez
FNunez

Reputation: 98

Once you create the map, use the function map-get(). You can also loop through each one if necessary: https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184

$map: (
 color01: value,
 color02: nextValue,
 color03: thirdValue
); 

.element {
  content: map-get($map, color01);
}

Upvotes: 0

Ka Mok
Ka Mok

Reputation: 1988

I found out this is called SASS mapping. The following will work. It works like a key value fetcher.

color: map-get($colors, primary)

Check this out for more info on it.

Upvotes: 12

Mete Cantimur
Mete Cantimur

Reputation: 1401

You could try this:

h1 {
   color: color($colors, primary);
}

Upvotes: 1

Related Questions