title: Sass - lighten color without color reference
body: <p>I have a page here to illustrate my question</p>
  
  <p>www.ttmt.org.uk/color</p>
  
  <p>It's just blocks of color that have a base color and then I'm using sass to lighten and darken the colors form the center.</p>
  
  <p>I have done it here by giving eavh div(color block) a class name and then referencing that name in the sass and lightening or darkening the base color.</p>
  
  <p>It's a bit of sass so I was thinking is it possible to give lighten or darken a color without referencing that color in the sass statment</p>
  
  <p>So instead of have </p>
  
  <pre><code>    &lt;div class="at-blue-lightest"&gt;&lt;/div&gt;
  
      //
  
      at-blue{
          background-color: $base-blue;
      }
  
      .at-blue-lightest{
          background: lighten($base-blue, 30%);
      }
  </code></pre>
  
  <p>I could have:</p>
  
  <pre><code>    &lt;div class="at-blue lightest"&gt;&lt;/div&gt;
  
      //
  
      .at-blue{
          background-color: $base-blue;
      }
  
      .lightest{
          background: lighten( 30%);
      }
  </code></pre>
  
  <p>So instead of referencing the color it would just lighten/darken what ever the color is.</p>
  
  <p>This is all the sass</p>
  
  <pre><code>    $base-blue: #267EC8;
      $base-green: #00A504;
      $base-red: #EA002A;
      $base-gray: #aaaaaa;
  
      .box{
          height: 150px;
          margin: 0 10px 10px 0;
          width: 150px;
          float: left;
      }
  
      .con{
          overflow: auto;
      }
  
      .at-blue{
          background-color: $base-blue;
      }
      .at-red{
          background-color: $base-red; 
      }
      .at-green{
          background-color: $base-green; 
      }
  
      .at-blue-lightest{
          background: lighten($base-blue, 30%);
      }
  
      .at-blue-lighter{
          background: lighten($base-blue, 20%);
      }
  
      .at-blue-light{
          background: lighten($base-blue, 10%);
      }
  
      .at-blue-dark{
          background: darken($base-blue, 10%);    
      }
  
      .at-blue-darker{
          background: darken($base-blue, 20%);    
      }
  
      .at-blue-darkest{
          background: darken($base-blue, 30%);    
      }
  
  
      .at-red-lightest{
          background: lighten($base-red, 30%);
      }
  
      .at-red-lighter{
          background: lighten($base-red, 20%);
      }
  
      .at-red-light{
          background: lighten($base-red, 10%);
      }
  
      .at-red-dark{
          background: darken($base-red, 10%); 
      }
  
      .at-red-darker{
          background: darken($base-red, 20%); 
      }
  
      .at-red-darkest{
          background: darken($base-red, 30%); 
      }
  
  
      .at-green-lightest{
          background: lighten($base-green, 30%);
      }
  
      .at-green-lighter{
          background: lighten($base-green, 20%);
      }
  
      .at-green-light{
          background: lighten($base-green, 10%);
      }
  
      .at-green-dark{
          background: darken($base-green, 10%);   
      }
  
      .at-green-darker{
          background: darken($base-green, 20%);   
      }
  
      .at-green-darkest{
          background: darken($base-, 30%);    
      }
  </code></pre>