<h1>SASS Maps Intro</h1>
<p>Next paragraph will contain all the information from our map.</p>
<p class="info"></p>
body {
  margin: 0;
}

h1 {
  padding: 20px 10px;
  margin: 0;
  font-family: 'Raleway';
  text-align: center;
}

p {
  margin: 5px 0 0 0;
  padding: 10px;
  color: white;
}

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black,
);

h1 {
  color: map-get($styling, 'color');
  background: map-get($styling, 'background')
}

p {
  font-family: map-get($styling, 'font-family');
  font-size: map-get($styling, 'font-size');
  background: map-get($styling, 'background')
}

$content : ' | ';

@each $style-name, $style in $styling {
  $content: $content + quote($style-name) + ': ' + $style + ' | ';
}

.info:before {
    content: quote($content);
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Lato|Raleway

External JavaScript

This Pen doesn't use any external JavaScript resources.