Sass / Compass中的自动变暗颜色

Posted 2023-03-07

【中文标题】Sass / Compass中的自动变暗颜色

【英文标题】：Automatic darken color in Sass / Compass

【发布时间】：2014-01-27 00:05:00

【问题描述】：

我正在为一个网站设置一个 CSS，在该网站上，:hover 状态下的所有链接都比正常状态下更暗。

我正在使用 Sass/Compass，所以我查看了 darken Sass 方法，这里：http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method

这里是用法：darken($color, $amount)

我的问题是：我怎样才能让这个“自动”将我所有的 <a> 元素设置为暗 80%？

我想要做的是（Sass 语法）：

a
   background: $blue
   &:hover
      background: darken(this element background-color, 80%)

最好的解决方案是什么？

【问题讨论】：

SASS - Manipulate inherited color?的可能重复

对于不可能的事情，你无法找到解决方案。

这在 SASS/SCSS 中是不可能的。但是，您可以考虑使用“较暗”颜色作为开始的链接颜色，并将其设置为 80% 的不透明度，然后在悬停状态下设置为 100% 的不透明度。效果相似，重复次数少。你写的 mixin 几乎没有节省时间。

background: darken($blue, 80%) 不工作吗？

Adirty hack™ 将元素置于黑色背景上，并在悬停时更改不透明度

【参考方案1】：

我想过这个。

我发现的唯一方法是创建一个 mixin：

@mixin setBgColorAndHover($baseColor)
    background-color: $baseColor
    &:hover
          background-color: darken($baseColor, 5%)

然后：

.button
    +setBgColorAndHover($green) // as $green is a color variable I use.

不是最好的，但可以做到这一点:)

【参考方案2】：

现在，最好在原生 CSS 中使用过滤器：

.button:hover 
  filter: brightness(85%);

【讨论】：

在纯 CSS 中做这件事肯定是件好事，但它并不能解决实际问题（设置背景颜色及其悬停背景颜色，变暗或变亮）。

好吧，既然你和我是唯一参与这个答案的两个人，你的问题是“我怎样才能让这个“自动”将我的所有 元素设置为 80% 暗？ jsfiddle.net/9emvaw10/1 你没说它一定是 Sass。并且，背景颜色被改变。如果您希望更改所有链接，则不需要 mixin。

不清楚我想用 Sass 来做这件事，而实现这一点的纯 CSS 方法必须出现在这个线程中（顺便说一句，这是 5 岁）。不过，今天为了兼容性，我还是坚持使用 Sass 方法

回到这个话题。因为 CSS 与 SASS 不兼容，您坚持使用 kludge？在我看来，添加一点 CSS 更利于可维护性。但是，TIMTOWTDI

我想我的意思是 CSS 过滤器属性浏览器支持在 2 年前并不是很好。到 2021 年，我肯定会继续努力，我放弃了 Sass 混合。