CSS Sass / Compass 中的自动变暗颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21003273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatic darken color in Sass / Compass
提问by enguerranws
I'm setting up a CSS for a website where all the links, in :hoverstate, are darker than in normal state.
我正在为一个网站设置 CSS，其中所有链接在:hover状态下都比正常状态下更暗。
I'm using Sass/Compass so I looked to the darkenSass method, here : http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method
我正在使用 Sass/Compass 所以我查看了darkenSass 方法，这里：http: //sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method
Here's the use : darken($color, $amount)
这是用法： darken($color, $amount)
My question is : how can I make this "automatic" to set all my <a>elements to be 80% darker ?
我的问题是：我怎样才能使这个“自动”将我的所有<a>元素设置为 80% 暗？
What I'm trying to do is (Sass syntax) :
我想要做的是（Sass 语法）：
a
background: $blue
&:hover
background: darken(this element background-color, 80%)
What's the best solution to do this ?
这样做的最佳解决方案是什么？
回答by enguerranws
I thought about this.
我想过这个。
The only way I found is by creating a mixin :
我发现的唯一方法是创建一个 mixin ：
@mixin setBgColorAndHover($baseColor)
background-color: $baseColor
&:hover
background-color: darken($baseColor, 5%)
And then :
进而 ：
.button
+setBgColorAndHover($green) // as $green is a color variable I use.
Not the best, but that will do the job :)
不是最好的，但可以做到这一点:)
回答by Merovex
By now, better to use a filter in native CSS:
现在，最好在原生 CSS 中使用过滤器：
.button:hover {
filter: brightness(85%);
}
