在Sass / Compass中自动使颜色变暗

css CSS

Tony凯

2020-03-24

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

这是用途： darken($color, $amount)

我的问题是：如何使此“自动”功能将所有<a>元素设置为暗80％？

我想做的是（Sass语法）：

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

最好的解决方案是什么？

第3542篇《在Sass / Compass中自动使颜色变暗》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

宝儿 2020.03.24

到目前为止，最好在本机CSS中使用过滤器：

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

Tom小卤蛋 2020.03.24

我想到了

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

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

接着：

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

不是最好的，但是那样就可以了：)

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android