CODEWITHSUNDEEP
csssass
kach
kach

Reputation: 809

Multiple line Sass maps

I created a list of multiple lines of key/value pairs and assigned it to the $themes variable. 

$rubricBody      : #6edbcf;
$rubricHead      : #c7e356; 
$rubricLife      : #feac9b; 
$rubricStandard  : #f5f7f7;

$rubricTxtBody       : #3f7d76;
$rubricTxtHead       : #6e7d2f;
$rubricTxtLife       : #d93d1e;
$rubricTxtStandard   : #3b4f58;

$themes: (
  "rubric1"  : (
    bkg         : $rubricBody,
    color       : $rubricTxtBody
  ),
  "rubric2"  : (
    bkg         : $rubricHead,
    color       : $rubricTxtHead
  ),
  "rubric3"  : (
    bkg         : $rubricLife,
    color       : $rubricTxtLife
  ),
  "rubric4"  : (
    bkg         : $rubricStandard,
    color       : $rubricTxtStandard 
  )
);

@each $name, $value in $themes {

   .#{$name} {
      background: $value.bkg;
      color:$value.color;
   } 
}

This code is not working for me, how can I get the value of bkg and color?

Upvotes: 1

Views: 844

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

This can be achieved using map-get($map, $key).

map_get($map, $key)

Returns the value in a map associated with the given key. If the map doesn’t have such a key, returns null.

(http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method)

The following SASS code:

$rubricBody      : #6edbcf;
$rubricHead      : #c7e356; 
$rubricLife      : #feac9b; 
$rubricStandard  : #f5f7f7;

$rubricTxtBody       : #3f7d76;
$rubricTxtHead       : #6e7d2f;
$rubricTxtLife       : #d93d1e;
$rubricTxtStandard   : #3b4f58;

$themes: (
  "rubric1"  : (
    bkg         : $rubricBody,
    color       : $rubricTxtBody
  ),
  "rubric2"  : (
    bkg         : $rubricHead,
    color       : $rubricTxtHead
  ),
  "rubric3"  : (
    bkg         : $rubricLife,
    color       : $rubricTxtLife
  ),
  "rubric4"  : (
    bkg         : $rubricStandard,
    color       : $rubricTxtStandard 
  )
);

@each $name, $value in $themes {
   .#{$name} {
      background: map-get($value, bkg);
      color: map-get($value, color);
   } 
}

Will result in this CSS:

.rubric1 {
    background: #6edbcf;
    color: #3f7d76;
}

.rubric2 {
    background: #c7e356;
    color: #6e7d2f;
}

.rubric3 {
    background: #feac9b;
    color: #d93d1e;
}

.rubric4 {
    background: #f5f7f7;
    color: #3b4f58;
}


<p class="sassmeister" data-gist-id="91cfe92b4994db25cfc7" data-height="480" data-theme="tomorrow"><a href="http://sassmeister.com/gist/91cfe92b4994db25cfc7">Play with this gist on SassMeister.</a></p><script src="http://cdn.sassmeister.com/js/embed.js" async></script>

Working example on SassMeister

Upvotes: 3

Related Questions