Sass - lighten color without color reference - sass

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%.

Answer 2

background-color: darken($black-blue, 10%);