export const multipleVariablesOrMaps = `
<h1>MULTIPLE VARIABLES OR MAPS</h1>
<p style="width:70%;">
    There are advantages of using maps rather than multiple distinct variables. The main one is the
    ability to loop over a map, which is not possible with distinct variables.
</p>
<p style="width:70%;">
    Another pro of using a map is the ability to create a little getter function to provide a
    friendlier API. For instance, consider the following Sass code:
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
/// Z-indexes map, gathering all Z layers of the application
/// @access private
/// @type Map
/// @prop {{'{'}}String{{'}'}} key - Layer’s name
/// @prop {{'{'}}Number{{'}'}} value - Z value mapped to the key
$z-indexes: (
  'modal': 5000,
  'dropdown': 4000,
  'default': 1,
  'below': -1,
);

/// Get a z-index value from a layer name
/// @access public
/// @param {{'{'}}String{{'}'}} $layer - Layer’s name
/// @return {{'{'}}Number{{'}'}}
/// @require $z-indexes
@function z($layer) {{'{'}}
  @return map-get($z-indexes, $layer);
{{'}'}}
    </pre>
</div>`;
