Skip to content

Instantly share code, notes, and snippets.

@lukebiggerstaff

lukebiggerstaff/ColorPalette.scss

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lukebiggerstaff/40047d7c64544c4b9364 to your computer and use it in GitHub Desktop.
Save lukebiggerstaff/40047d7c64544c4b9364 to your computer and use it in GitHub Desktop.
Download ZIP
An easy way to create and modify color palettes using Sass maps
Raw
colorpalette.css
.green-block--light {
background-color: #4dff4d;
height: 100px;
width: 100px;
float: left; }
.green-block--base {
background-color: #1aff1a;
height: 100px;
width: 100px;
float: left; }
.green-block--dark {
background-color: #00e600;
height: 100px;
width: 100px;
float: left; }
.black-block--light {
background-color: #272727;
height: 100px;
width: 100px;
float: left; }
.black-block--base {
background-color: #1a1a1a;
height: 100px;
width: 100px;
float: left; }
.black-block--dark {
background-color: #0d0d0d;
height: 100px;
width: 100px;
float: left; }
.grey-block--light {
background-color: #d9d9d9;
height: 100px;
width: 100px;
float: left; }
.grey-block--base {
background-color: #cccccc;
height: 100px;
width: 100px;
float: left; }
.grey-block--dark {
background-color: #b3b3b3;
height: 100px;
width: 100px;
float: left; }
.yellow-block--light {
background-color: #ffff66;
height: 100px;
width: 100px;
float: left; }
.yellow-block--base {
background-color: #ffff33;
height: 100px;
width: 100px;
float: left; }
.yellow-block--dark {
background-color: yellow;
height: 100px;
width: 100px;
float: left; }
[class$=row]:after {
content: '';
display: table;
clear: both; }
/*# sourceMappingURL=ColorPalette.css.map */
Raw
colorpalette.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Palette</title>
<link rel="stylesheet" href="css/artboard.css" />
</head>
<body>
<div class="block-row">
<div class="black-block--light"></div>
<div class="black-block--base"></div>
<div class="black-block--dark"></div>
</div>
<div class="block-row">
<div class="grey-block--light"></div>
<div class="grey-block--base"></div>
<div class="grey-block--dark"></div>
</div>
<div class="block-row">
<div class="green-block--light"></div>
<div class="green-block--base"></div>
<div class="green-block--dark"></div>
</div>
<div class="block-row">
<div class="yellow-block--light"></div>
<div class="yellow-block--base"></div>
<div class="yellow-block--dark"></div>
</div>
</body>
</html>
Raw
ColorPalette.scss
// Base Colors
$green: #1aff1a;
$black: #1a1a1a;
$grey: #cccccc;
$yellow: #ffff33;
//color palette
$palettes: (
green: (
light : lighten($green, 10%),
base : $green,
dark : darken($green, 10%),
),
black: (
light : lighten($black, 5%),
base : $black,
dark : darken($black, 5%),
),
grey: (
light : lighten($grey, 5%),
base : $grey,
dark : darken($grey, 10%),
),
yellow: (
light : lighten($yellow, 10%),
base : $yellow,
dark : darken($yellow, 10%),
)
);
// Define classes for the color palette.
// 1) loop through each value in A
@each $nestedMap, $nestedMaps in $palettes {
// 1a) write a block with b's name in selector
.#{$nestedMap}-block {
// 2) loop through each value in b
@each $key, $value in $nestedMaps {
// 2a) write the key in the selector
&--#{$key} {
// 2b) write the value in the the css body
background-color: #{$value};
height: 100px;
width: 100px;
float: left;
}
}
}
}
[class$=row]:after {
content: '';
display: table;
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment