A Pen by sheriffderek.

Basic-SASS-color-setup.markdown

Basic SASS color setup

This is just a simple base-line SASS color setup I use in my projects. I find that early style tiles and color choices help focus.

A Pen by sheriffderek on CodePen.

License.

index.html

<!-- 

This isn't the point

-->

<div class="light">

  <div class="white circle"></div>
  <div class="black circle"></div>
  
  <div class="gray-light circle"></div>
  <div class="gray circle"></div>
  <div class="gray-dark circle"></div>
  
  <div class="color-light circle"></div>
  <div class="color circle"></div>
  <div class="color-dark circle"></div>
  
  <div class="hightlight-light circle"></div>
  <div class="hightlight circle"></div>
  <div class="hightlight-dark circle"></div>

</div>


<div class="dark">

  <div class="white circle"></div>
  <div class="black circle"></div>
  
  <div class="gray-light circle"></div>
  <div class="gray circle"></div>
  <div class="gray-dark circle"></div>
  
  <div class="color-light circle"></div>
  <div class="color circle"></div>
  <div class="color-dark circle"></div>
  
  <div class="hightlight-light circle"></div>
  <div class="hightlight circle"></div>
  <div class="hightlight-dark circle"></div>
  
</div>


<div class="bars">

  <div class="white pad">Basic SASS color setup</div>
  <div class="black"></div>
  
  <div class="gray-light"></div>
  <div class="gray"></div>
  <div class="gray-dark"></div>
  
  <div class="color-light"></div>
  <div class="color"></div>
  <div class="color-dark"></div>
  
  <div class="hightlight-light"></div>
  <div class="hightlight"></div>
  <div class="hightlight-dark"></div>
  
</div>

style.scss

@import "compass";
// $colors
$white: #fff;
$black: #222;

$gray: #eaeaea;
$gray-light: lighten($gray, 5%);
$gray-dark: darken($gray, 15%);

$color: #f06;
$color-light: lighten($color, 20%);
$color-dark: darken($color, 10%);

$highlight: lightblue;
$highlight-light: lighten($highlight, 15%);
$highlight-dark: darken($highlight, 20%);




















































// $page styles

body {
  padding: 0em;
}

.pad {
  padding: 1em;
}

div {
  width: 100%;
  float: left;
  min-height: 4em;
}

.circle {
  width: 4em;
  height: 4em;
  border-radius: 50%;
  float: left;
  margin: .5em;
}

.light {
  background-color: white;
  padding: 1em;
}

.dark {
  background-color: black;
  padding: 1em;
}


.white {
  background-color: $white;
}

.black {
  background-color: $black;
}


.gray {
  background-color: $gray;
}

.gray-light {
  background-color: $gray-light;
}

.gray-dark {
  background-color: $gray-dark;
}


.color {
  background-color: $color;
}

.color-light {
  background-color: $color-light;
}

.color-dark {
  background-color: $color-dark;
}


.hightlight {
  background-color: $highlight;
}

.hightlight-light {
  background-color: $highlight-light;
}

.hightlight-dark {
  background-color: $highlight-dark;
}