SASS - 使用颜色变暗而不使用颜色[重复]答案

【问题标题】：SASS - Use color darken without using a color [duplicate]SASS - 使用颜色变暗而不使用颜色[重复]
【发布时间】：2016-02-12 20:47:59
【问题描述】：

很确定这是不可能的，但我想我会问

我在这里有一个 jsfiddle - https://jsfiddle.net/uprfxhL9/1/

我可以使用 SASS 的 darken 通过颜色和百分比来改变颜色。

我实际使用的是在 CMS 中设置颜色的按钮，所以我不知道 CSS 中的颜色。

有可能以某种方式将颜色变暗一个百分比，而不是实际在函数中使颜色变暗。

    $base-color: #f22727;

    .btn{  
        color: white;
        display: inline-block;
        padding: 10px 20px;
        margin: 0 0 5px 0;
        text-decoration: none;
        background-color: $base-color; 
    }

    .one{ 
        &:hover{
            background-color: darken($base-color, 20%);
        }
    }

It worked a lot for me thanx!! I've just settle down the darken value to 
15%, so that it would come more lighter. Look at my codes below:

    .my-class {
        background: darken($color-base, 15%);
         padding: 20px;

【问题讨论】：

你觉得这里到底应该变暗什么颜色？
按钮的颜色，但我不知道 css 中的这种颜色，因为它是在 CMS 中设置并作为内联 css 样式添加的

标签： colors sass

【解决方案1】：

要回答您的问题，不，这是不可能的。
但是，您可以使用 box-shadow 将其变暗，就像在 this answer 中发布的那样：

box-shadow:inset 0 0 0 500px rgba(0,0,0,0.5);

这呈现完全相同的效果，如您所见in this codepen。

如果 .btn 没有任何内容，或者您想使用多个元素，则可以使用过滤器：

  -webkit-filter: brightness(.5);
  filter: brightness(.5);

但是，过滤器没有最好的支持（IE 根本不支持）

【讨论】：