Skip to content

Instantly share code, notes, and snippets.

@postpostmodern

postpostmodern/_colors.scss

Created June 15, 2016 21:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save postpostmodern/5bfe67b8d18cc61c362c1e6e62f9922a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save postpostmodern/5bfe67b8d18cc61c362c1e6e62f9922a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. postpostmodern created this gist Jun 15, 2016.
    16 changes: 16 additions & 0 deletions _colors.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    $colors: (
    white: white,
    gray1: rgb(238, 240, 242),
    gray2: rgb(187, 196, 201),
    gray3: rgb(162, 168, 172),
    gray4: rgb(110, 116, 120),
    accent: red
    );

    @function c($key) {
    @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
    }
    @error "Unknown color: #{$key}";
    @return null;
    }
    45 changes: 45 additions & 0 deletions colorguide.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    <!doctype html>
    <html>
    <head>
    <title>Color Guide</title>
    <link rel="stylesheet" href="colorguide.css">
    </head>
    <body>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </body>
    </html>
    49 changes: 49 additions & 0 deletions colorguide.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    /*
    colorguide.scss
    The following will produce the CSS necessary
    to visualize your site's colors.
    */

    // Import your _colors.scss file here:
    @import "colors";

    @function contrastingColor($color) {
    @if lightness($color) > 60% {
    @return black;
    }
    @else {
    @return white;
    }
    }

    body, ul, li {
    margin: 0;
    padding: 0;
    font: normal 16px 'Source Code Pro', monospace;
    }

    ul {
    list-style: none;
    }

    li {
    padding: 0.5em 2em;

    $idx: 1;

    @each $name, $color in $colors {
    &:nth-child(#{$idx}) {
    background: $color;
    color: contrastingColor($color);

    &:before {
    content: "#{$name}";
    }
    }

    $idx: $idx + 1;
    }
    }