我可以用SASS或CSS3计算单色颜色值吗？

Question

我希望能够指定基色，例如：

$basecolor: #ff0000;

并基于此计算其他（较暗）颜色。例如：

$backgroundcolor: ($basecolor + rgba(0, 0, 0, .25));
$disabledcolor: ($basecolor + rgba(0, 0, 0, .5));
/* etc */

这可能吗？

我现在通过创建叠加层来实现这一点，但这需要我添加额外的HTML，并且感觉很脏。例如：

.overlay25 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .25);
}

然后进入：

<div class="elementIWantToMakeDarker">
    <div class="overlay25">
        <p>content</p>
    </div>
</div>

实现这一目标的最佳方法是什么？

Answer 1

最简单的方法是使用darken()和lighten() Sass＆＃39;原生函数：

$color:       #123465;
$color_dark:  darken($color, 50%);
$color_light: lighten($color, 50%);

您还可以使用mix()功能，它允许您将两种颜色组合在一起，具有相对权重：

$color:       #123465;
$color_dark:  mix($color, black, 50%);
$color_light: mix($color, white, 50%);