Sass function -- map, sass -- map

Sass function -- map, sass -- map

Map
The map of Sass is often called a Data map, or an array.Key: valueIn pairs.

1 $map: (2     $key1: value1,3     $key2: value2,4     $key3: value35 )

First, there is a variable similar to Sass, with$Add namespace to declareMap. Followed by a parentheses()ToKey: valueThe key and value are in pairs, and each pair uses a comma(,)Separated by commas.
The key in the key is used to find the associated value. Map can easily collect key values and dynamically insert values.

1 $default-color: #fff !default;2 $primary-color: #22ae39 !default;

1 $color: (2     default: #fff,3     primary: #22ae394 );

You need to add a new color variable value. You can add the variable values randomly in map:

1 $color: (2     default: #fff,3     primary: #22ae39,4     negative: #d9534f5 );

Allows map nesting map. You can add one or more pairs of key: value:

1 $map: (2     key1: value1,3     key2: (4         key-1: value-1,5         key-2: value-2,6     ),7     key3: value38 );

If you have encountered a skin change project and each set of skin may have a lot of colors, the variables that use this function to manage colors are very rational and easy to maintain and manage. You can use:

 1 $theme-color: ( 2     default: ( 3         bgcolor: #fff, 4         text-color: #444, 5         link-color: #39f 6     ), 7     primary:( 8         bgcolor: #000, 9         text-color:#fff,10         link-color: #93f11     ),12     negative: (13         bgcolor: #f36,14         text-color: #fefefe,15         link-color: #d4e16     )17 );

 

 

 

 

Sass Maps Functions

We have introduced how to use map to manage variables. However, to obtain variables in Sass or perform more meaningful operations on map, we must use the map function. In Sass, map itself carries seven functions:

• Map-get ($ map, $ key): Returns the values related to map based on the given key value.
• Map-merge ($ map1, $ map2): Merge two maps into a new map.
• Map-remove ($ map, $ key): Delete a key from the map and return a new map.
• Map-keys ($ map): Returns all keys in the map.
• Map-values ($ map): Returns all values in the map.
• Map-has-key ($ map, $ key): Determines whether a map has a corresponding value based on the given key value. If yes, true is returned; otherwise, false is returned.
• Keywords ($ args): Return a function parameter. This parameter can be used to dynamically set Keys and values.

 

 

 

Sass Maps function-map-get ($ map, $ key)
The map-get ($ map, $ key) function returns the value of $ key in $ map based on the $ key parameter. If $ key does not exist in $ map, null is returned. This function includes two parameters:

$ Map: defined map. $ Key: the key to be traversed.

Assume that a map of $ social-colors is defined:

1 $social-colors: (2     dribble: #ea4c89,3     facebook: #3b5998,4     github: #171515,5     google: #db4437,6     twitter: #55acee7 );

Assume you want to obtain facebookKey ValueThe corresponding value #3b5998 can be implemented using the map-get () function:

1 .btn-dribble{2     color: map-get($social-colors,facebook);3 }

Compiled CSS:

1 .btn-dribble {2     color: #3b5998;3 }

Assume that the map $ social-colorsNo$ Weibo:

1 .btn-weibo{2     font-size: 12px;3     color: map-get($social-colors,weibo);4 }

At this time, CSS is compiled:

1 .btn-weibo {2     font-size: 12px;3 }

If $ key is not in $ map,NoCompile CSS. In Sass, map-get ($ social-colors, weibo) returns a null value. However, in the compiled CSS, you only know that the style is not compiled, and there is no error or warning information during command terminal compilation. You don't know why the style cannot be compiled, or the returned value is null. Poor experience. If we customize a function and add a judgment, it is completely different.

 

 

 

Sass Maps function-map-has-key ($ map, $ key)
The map-has-key ($ map, $ key) function returns a Boolean value. When $ map is inYesIf this $ key is used, the function returns true; otherwise, false.
When $ key is not in $ map, the map-get ($ map, $ key) function returns a null value. However, developers cannot see any prompts. If you use the map-has-key ($ map, $ key) function, you can change this state.
Customize a function, such as colors ():

 1 @function colors($color){ 2     @if not map-has-key($social-colors,$color){ 3         @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; 4 } 5     @return map-get($social-colors,$color); 6 } 7 .btn-dribble { 8     color: colors(dribble); 9 }10 .btn-facebook {11     color: colors(facebook);12 }13 .btn-github {14     color: colors(github);15 }16 .btn-google {17     color: colors(google);18 }19 .btn-twitter {20     color: colors(twitter);21 }22 .btn-weibo {23     color: colors(weibo);24 }

An error message is displayed when compiling on the terminal.

Compiled CSS:

 1 .btn-dribble { 2     color: #ea4c89; 3 } 4  5 .btn-facebook { 6     color: #3b5998; 7 } 8  9 .btn-github {10     color: #171515;11 }12 13 .btn-google {14     color: #db4437;15 }16 17 .btn-twitter {18     color: #55acee;19 }

Command terminal prompt information:

WARNING: No color found for `weibo` in $social-colors map. Property omitted.on line 13 of test.scss

You can use @ each:

1 @each $social-network,$social-color in $social-colors {2     .btn-#{$social-network} {3         color: colors($social-network);4     }5 }

 

 

 

Sass Maps function-map-keys ($ map)
The map-keys ($ map) function returnsAllKey. These values are assigned toVariableThen he isList. For example:

map-keys($social-colors);

The returned value is:

"dribble","facebook","github","google","twitter"

1 $ list: map-keys ($ social-colors); 2 // equivalent to: 3 $ list: "dribble", "facebook", "github", "google ", "twitter ";

Example:

1 @function colors($color){2     $names: map-keys($social-colors);3     @if not index($names,$color){4         @warn "Waring: `#{$color} is not a valid color name.`";5     }6     @return map-get($social-colors,$color);7 }

Use map-keys to map $ social-colorsAllKey is extracted and assigned to a file named $ names.List. Then return $ color at $ names position through index ($ names, $ color). If this position does not exist, a prompt is returned. If yes, a correct value is returned.

You can also traverse all values through @ each or @:

@ Each:

1 @each $name in map-keys($social-colors){2     .btn-#{$name}{3         color: colors($name);4     }5 }

@:

1 @for $i from 1 through length(map-keys($social-colors)){2     .btn-#{nth(map-keys($social-colors),$i)} {3         color: colors(nth(map-keys($social-colors),$i));4     }5 }

 

 

 

Sass Maps functions-map-values ($ map) and map-merge ($ map1, $ map2)
Map-values ($ map)
The map-values ($ map) function is similar to the map-keys ($ map) function. The difference is that map-values ($ map) obtains all values of $ map, it can be said that it will also be a list. In addition, if the same value exists in map-values ($ map), All values are obtained.

1 map-values ($ social-colors) 2 // will return: 3 # ea4c89, #3b5998, #171515, # db4437, #55 acee

Values are also separated by commas.
Map-merge ($ map1, $ map2)
The map-merge ($ map1, $ map2) function combines $ map1 and $ map2 to obtain a new $ map. This method is the best method if you want to quickly Insert new values into $ map.

 1 $color: ( 2     text: #f36, 3     link: #f63, 4     border: #ddd, 5     backround: #fff 6 ); 7 $typo:( 8     font-size: 12px, 9     line-height: 1.610 );

Merge two $ maps into a map:

$newmap: map-merge($color,$typo);

A new map will be generated:

1 $newmap:(2     text: #f36,3     link: #f63,4     border: #ddd,5     background: #fff,6     font-size: 12px,7     line-height: 1.68 );

In this way, you can use functions such as map-get () to do other things.
Note:: If $ map1 and $ map2 haveSame$ Key name, then $ key in $ map2 willReplaceIn $ map1:

 

 

 

Sass Maps functions-map-remove ($ map, $ key), keywords ($ args)
Map-remove ($ map, $ key)
The map-remove ($ map, $ key) function is used to delete a $ key in the current $ map to get a new map. The returned value is a map. It cannot directly Delete another map from a map, but can only get a new map by deleting a key in the map.

$map:map-remove($social-colors,dribble);

A new map is returned:

1 $map:(2     facebook: #3b5998,3     github: #171515,4     google: #db4437,5     twitter: #55acee6 );

If the deleted key does not exist in $ map, the new map returned by the map-remove () function is the same as the previous map.

$map:map-remove($social-colors,weibo);

Keywords ($ args)
The keywords ($ args) function is a function that dynamically creates a map. You can create a map by changing the parameters of a hybrid macro or function. The parameter is also paired, where $ args becomes the key (the $ symbol is automatically removed), and $ args corresponds to the value.

 1 @mixin map($args...){ 2     @debug keywords($args); 3 } 4 @include map( 5     $dribble: #ea4c89, 6     $facebook: #3b5998, 7     $github: #171515, 8     $google: #db4437, 9     $twitter: #55acee10 );

On the command terminal, you can see an input @ debug information:

DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)