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

【问题标题】：Can I calculate monochromatic color values with SASS or CSS3?我可以用 SASS 或 CSS3 计算单色值吗？
【发布时间】：2015-04-23 23:25:11
【问题描述】：

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

$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>

最好的方法是什么？

【问题讨论】：

标签： css sass

【解决方案1】：

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

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

【讨论】：