Ananda Designs Sass

A color variable naming convention for Ananda Designs

by Brock Callahan

HTML

<h1 class="uppercase">Ananda <span class="text-lighter">Designs</span> <span class="text-complement">w/</span> Sass</h1>

<hr>

<h2 class="text-lighter">.text-lighter</h2>
<h2 class="text-light">.text-light</h2>
<h2>Default text with no classes</h2>
<h2 class="text-dark">.text-dark</h2>
<h2 class="text-darker">.text-darker</h2>
<h2 class="text-complement">.text-complement</h2>
<h2 class="blackground text-inverse">.text-inverse</h2>

<hr>
* click to toggle black background

SCSS

/* Control color values in one place */
$color__text_default: #222;

$color__text_light: lighten($color__text_default, 15%);
$color__text_lighter: lighten($color__text_default, 30%);
$color__text_dark: darken($color__text_default, 15%);
$color__text_darker: darken($color__text_default, 30%);
$color__text_complement: complement($color__text_default);
$color__text_invert: invert($color__text_default);

body {
  color: $color__text_default;  
  
  h2 {
    cursor: pointer;
  }
}

.text-light {
  color: $color__text_light;
}

.text-lighter {
  color: $color__text_lighter;
}

.text-dark {
  color: $color__text_dark;
}

.text-darker {
  color: $color__text_darker;
}

.text-complement {
  color: $color__text_complement;
}

.text-inverse {
  color: $color__text_invert;
}

.uppercase {
  text-transform: uppercase;
}

.blackground {
  background-color: #000;
}

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

JavaScript

$("document").ready(function() {
	$("h2").click(function() {
  	var black = $(this).hasClass("blackground");
    if (!black) $(this).addClass("blackground");
    if (black) $(this).removeClass("blackground");
  });
});