Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----
@import "compass/utilities/color";
$colors: (
"red": tomato,
"orange": orange,
"blue": lightblue,
"green": lime,
"pink": hotpink
);
$brand-colors: (
"brand-color": map-get($colors, "red"),
"bg-color": map-get($colors, "orange"),
"link-color": map-get($colors, "blue"),
"text-color": map-get($colors, "green"),
"meta-color": map-get($colors, "pink")
);
$i: 1;
@each $color-name, $color in $brand-colors {
div:nth-child(#{$i}) {
padding: 5px 10px;
margin-bottom: 8px;
font-size: 20px;
background: $color;
&:before {
content: "#{$color-name}";
color: contrast-color($color);
}
}
$i: $i+1;
}
div:nth-child(1) {
padding: 5px 10px;
margin-bottom: 8px;
font-size: 20px;
background: tomato;
}
div:nth-child(1):before {
content: "brand-color";
color: black;
}
div:nth-child(2) {
padding: 5px 10px;
margin-bottom: 8px;
font-size: 20px;
background: orange;
}
div:nth-child(2):before {
content: "bg-color";
color: black;
}
div:nth-child(3) {
padding: 5px 10px;
margin-bottom: 8px;
font-size: 20px;
background: lightblue;
}
div:nth-child(3):before {
content: "link-color";
color: black;
}
div:nth-child(4) {
padding: 5px 10px;
margin-bottom: 8px;
font-size: 20px;
background: lime;
}
div:nth-child(4):before {
content: "text-color";
color: black;
}
div:nth-child(5) {
padding: 5px 10px;
margin-bottom: 8px;
font-size: 20px;
background: hotpink;
}
div:nth-child(5):before {
content: "meta-color";
color: black;
}
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.