<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
This Pen doesn't use any external JavaScript resources.