Skip to content

Instantly share code, notes, and snippets.

@codingdesigner

codingdesigner/SassMeister-input-HTML.html

Last active August 29, 2015 14:13
Show Gist options
  • Save codingdesigner/7afe3074a443b471732d to your computer and use it in GitHub Desktop.
Save codingdesigner/7afe3074a443b471732d to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<article>
<h1 class="title">Experiment with colors when designing in the browser</h1>
<h2 class="subtitle">Of course this isn't limited to colors.</h2>
<p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p>
<p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p>
<p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p>
</article>
Raw
SassMeister-input.scss
// ----
// libsass (v3.1.0-beta)
// ----
// 1. Add colors to a map
$colors: (
purple: #a993e1,
purple--dark: #665695,
purple--light--mid: #c7bceb,
purple--light: #e6e6f5,
blue--paler: #eef0f3,
blue--pale: #d9e2ed,
blue: #6c9acd,
blue-dark: #375573,
blue-darker: #2E4455,
blue-light: #97dcf7,
yellow: #f5c655,
yellow-dark: #957128,
green: #a7da8d,
green-dark: #677f5ck,
red: #ed5759,
red-dark: #92333b,
white: hsl(0, 0%, 100%),
gray--light: #f5f5f5,
gray--lightish: #cccccc,
gray--light--mid: #8c8e93,
gray: #4d515b,
gray--dark: #060606,
black: hsl(0, 0%, 0%)
);
// 2. write a mixin to write the colors in the map to css comments
@mixin try-colors() {
@each $color-var, $color-val in $colors {
/* color: #{$color-val}; */
/* background-color: #{$color-val}; */
}
}
// 3. Experiment!
article {
padding: 0.25em 0.5em;
// oh look I chose a color!
color: map-get($colors, blue);
background-color: map-get($colors, gray--light);
// I always call this last so it overwrites any other colors I was playing with
// be sure to remove it when you're done experimenting
@include try-colors();
}
.title {
@include try-colors();
}
.subtitle {
@include try-colors();
}
p {
@include try-colors();
}
Raw
SassMeister-output.css
article {
padding: 0.25em 0.5em;
color: #6c9acd;
background-color: #f5f5f5;
/* color: #a993e1; */
/* background-color: #a993e1; */
/* color: #665695; */
/* background-color: #665695; */
/* color: #c7bceb; */
/* background-color: #c7bceb; */
/* color: #e6e6f5; */
/* background-color: #e6e6f5; */
/* color: #eef0f3; */
/* background-color: #eef0f3; */
/* color: #d9e2ed; */
/* background-color: #d9e2ed; */
/* color: #6c9acd; */
/* background-color: #6c9acd; */
/* color: #375573; */
/* background-color: #375573; */
/* color: #2E4455; */
/* background-color: #2E4455; */
/* color: #97dcf7; */
/* background-color: #97dcf7; */
/* color: #f5c655; */
/* background-color: #f5c655; */
/* color: #957128; */
/* background-color: #957128; */
/* color: #a7da8d; */
/* background-color: #a7da8d; */
/* color: #677f5c k; */
/* background-color: #677f5c k; */
/* color: #ed5759; */
/* background-color: #ed5759; */
/* color: #92333b; */
/* background-color: #92333b; */
/* color: white; */
/* background-color: white; */
/* color: #f5f5f5; */
/* background-color: #f5f5f5; */
/* color: #cccccc; */
/* background-color: #cccccc; */
/* color: #8c8e93; */
/* background-color: #8c8e93; */
/* color: #4d515b; */
/* background-color: #4d515b; */
/* color: #060606; */
/* background-color: #060606; */
/* color: black; */
/* background-color: black; */ }
.title {
/* color: #a993e1; */
/* background-color: #a993e1; */
/* color: #665695; */
/* background-color: #665695; */
/* color: #c7bceb; */
/* background-color: #c7bceb; */
/* color: #e6e6f5; */
/* background-color: #e6e6f5; */
/* color: #eef0f3; */
/* background-color: #eef0f3; */
/* color: #d9e2ed; */
/* background-color: #d9e2ed; */
/* color: #6c9acd; */
/* background-color: #6c9acd; */
/* color: #375573; */
/* background-color: #375573; */
/* color: #2E4455; */
/* background-color: #2E4455; */
/* color: #97dcf7; */
/* background-color: #97dcf7; */
/* color: #f5c655; */
/* background-color: #f5c655; */
/* color: #957128; */
/* background-color: #957128; */
/* color: #a7da8d; */
/* background-color: #a7da8d; */
/* color: #677f5c k; */
/* background-color: #677f5c k; */
/* color: #ed5759; */
/* background-color: #ed5759; */
/* color: #92333b; */
/* background-color: #92333b; */
/* color: white; */
/* background-color: white; */
/* color: #f5f5f5; */
/* background-color: #f5f5f5; */
/* color: #cccccc; */
/* background-color: #cccccc; */
/* color: #8c8e93; */
/* background-color: #8c8e93; */
/* color: #4d515b; */
/* background-color: #4d515b; */
/* color: #060606; */
/* background-color: #060606; */
/* color: black; */
/* background-color: black; */ }
.subtitle {
/* color: #a993e1; */
/* background-color: #a993e1; */
/* color: #665695; */
/* background-color: #665695; */
/* color: #c7bceb; */
/* background-color: #c7bceb; */
/* color: #e6e6f5; */
/* background-color: #e6e6f5; */
/* color: #eef0f3; */
/* background-color: #eef0f3; */
/* color: #d9e2ed; */
/* background-color: #d9e2ed; */
/* color: #6c9acd; */
/* background-color: #6c9acd; */
/* color: #375573; */
/* background-color: #375573; */
/* color: #2E4455; */
/* background-color: #2E4455; */
/* color: #97dcf7; */
/* background-color: #97dcf7; */
/* color: #f5c655; */
/* background-color: #f5c655; */
/* color: #957128; */
/* background-color: #957128; */
/* color: #a7da8d; */
/* background-color: #a7da8d; */
/* color: #677f5c k; */
/* background-color: #677f5c k; */
/* color: #ed5759; */
/* background-color: #ed5759; */
/* color: #92333b; */
/* background-color: #92333b; */
/* color: white; */
/* background-color: white; */
/* color: #f5f5f5; */
/* background-color: #f5f5f5; */
/* color: #cccccc; */
/* background-color: #cccccc; */
/* color: #8c8e93; */
/* background-color: #8c8e93; */
/* color: #4d515b; */
/* background-color: #4d515b; */
/* color: #060606; */
/* background-color: #060606; */
/* color: black; */
/* background-color: black; */ }
p {
/* color: #a993e1; */
/* background-color: #a993e1; */
/* color: #665695; */
/* background-color: #665695; */
/* color: #c7bceb; */
/* background-color: #c7bceb; */
/* color: #e6e6f5; */
/* background-color: #e6e6f5; */
/* color: #eef0f3; */
/* background-color: #eef0f3; */
/* color: #d9e2ed; */
/* background-color: #d9e2ed; */
/* color: #6c9acd; */
/* background-color: #6c9acd; */
/* color: #375573; */
/* background-color: #375573; */
/* color: #2E4455; */
/* background-color: #2E4455; */
/* color: #97dcf7; */
/* background-color: #97dcf7; */
/* color: #f5c655; */
/* background-color: #f5c655; */
/* color: #957128; */
/* background-color: #957128; */
/* color: #a7da8d; */
/* background-color: #a7da8d; */
/* color: #677f5c k; */
/* background-color: #677f5c k; */
/* color: #ed5759; */
/* background-color: #ed5759; */
/* color: #92333b; */
/* background-color: #92333b; */
/* color: white; */
/* background-color: white; */
/* color: #f5f5f5; */
/* background-color: #f5f5f5; */
/* color: #cccccc; */
/* background-color: #cccccc; */
/* color: #8c8e93; */
/* background-color: #8c8e93; */
/* color: #4d515b; */
/* background-color: #4d515b; */
/* color: #060606; */
/* background-color: #060606; */
/* color: black; */
/* background-color: black; */ }
Raw
SassMeister-rendered.html
<article>
<h1 class="title">Experiment with colors when designing in the browser</h1>
<h2 class="subtitle">Of course this works with anything.</h2>
<p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p>
<p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p>
<p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p>
</article>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment