SASS working with map

In sass, it is very to create map. We have the following structure:


$varibleName:(
    key1: value1,
    key2:value2
    .
    .
);

When we want to use the value from the map, then we use the map-get function that accept variable and key and return the value.
map-get($variableName, keyName)

In the  example below code scss:



$style:(
  width:12px,
  height: 14px
);

body {
  height:map-get($style, height);
}

will become the below css code:


body {
  height: 14px; 
}

Anther scss nice function to work with map is map-values($variable);
It will create comma separated list of all the values in the map.

The scss example below



$style:(
  width:12px,
  height: 14px
);

body {
  height:map-values($style);
}

Will becone the below css:


body {
  height: 12px, 14px; 
}

if we want to replace the comma separated list with space separated list, then we can wrap the map-values with zip function combine with “…” (three dots).

zip(map-values($style)...)
Will create a space separated list.

For example the below scss:



$style:(
  width:12px,
  height: 14px
);

body {
  height:zip(map-values($style)...);
}

Will become the below css:


body {
  height: 12px 14px; 
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s