Sass - lighten color without color reference

Question

I have a page here to illustrate my question

www.ttmt.org.uk/color

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.

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.

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

So instead of have

    <div class="at-blue-lightest"></div>

    //

    at-blue{
        background-color: $base-blue;
    }

    .at-blue-lightest{
        background: lighten($base-blue, 30%);
    }

I could have:

    <div class="at-blue lightest"></div>

    //

    .at-blue{
        background-color: $base-blue;
    }

    .lightest{
        background: lighten( 30%);
    }

So instead of referencing the color it would just lighten/darken what ever the color is.

This is all the sass

    $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%);    
    }

Answer 1

Sass always compiles to CSS, so if there's no way that CSS can do it, neither can Sass. There's no way that CSS can know what's underneath a given element; since that depends on the HTML delivered to the page too.

However, you can just use CSS's more advanced color value specifications, which include semi-transparent functionality with RGBA and HSLA. For example:

background: rgba(255, 255, 255, .25);

is white that's 25% transparent. Thus it will lighten whatever is behind it by 25%.