web-dev-qa-db-ja.com

サス/コンパスの自動暗色

_:hover_状態のすべてのリンクが通常の状態よりも暗いWebサイト用のCSSを設定しています。

私は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%)
_

これを行うための最良の解決策は何ですか？

csssasscompass-sass
16
enguerranws

私はこれについて考えました。

私が見つけた唯一の方法は、ミックスインを作成することです：

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

その後 ：

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

最高ではありませんが、それでうまくいきます:)

36
enguerranws

今では、ネイティブCSSでフィルターを使用する方が良いでしょう。

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