通过 scss 悬停来减轻单个背景颜色 - 如何？答案

【问题标题】：Lighten individual background-color with hover by scss - how?通过 scss 悬停来减轻单个背景颜色 - 如何？
【发布时间】：2015-03-12 05:35:20
【问题描述】：

我有一些具有不同背景颜色的块（在变量中设置），如果用户悬停其中一个，颜色会变亮/变淡。

所以我用这个：

.block1:hover,.block2:hover{
    background-color:lighten($color1,40%);
}

但这只是将一种静态颜色 - $color1 - 淡化到 40%。如果 .block1 有 $color1 并且 .block2 有 $color2 作为背景颜色，我该怎么做？所以结果应该是

 .block1:hover{
        background-color:lighten($color1,40%);
    }
.block2:hover{
        background-color:lighten($color2,40%);
    }

因此我需要使用什么？

【问题讨论】：

我不明白。似乎第二段 CSS 回答了你的问题？
可能想在这里使用mixin。
@Rvervuurt：不，它没有。它只是在 scss 应该做什么之后显示结果。但是我询问了到达那里的方法，乔什的回答完全解决了。

标签： css sass

【解决方案1】：

使用 mixin，如下所示：

.block1 {
  .backgroundsetup($color1);
}
.block2 {
  .backgroundsetup($color2);
}

.backgroundsetup($color, $amt: 40%) {
  background-color: $color;

  &:hover {
    background-color: lighten($color, $amt);
  }
}

【讨论】：

这不是有效的 SASS 或 LESS

【解决方案2】：

在 SCSS 中编写您在示例中的 CSS 没有特殊的方法，您就是这样做的。但是如果你想优化和编写更少的代码，那么你可以利用 SASS 的 hashmaps 和 foreach 循环来为你做这件事。

SASS

$color1: #4e9bac;
$color2: #248cff;
$color3: #3b5998;

$blocks: (
    block1: $color1,
    block2: $color2,
    block3: $color3,
);

@each $block, $color in $blocks {
  .#{$block} {
    background-color: $color;

      &:hover {
        background-color: lighten($color, 40%);
      }
  }
}

CSS 输出

.block1 {
  background-color: #4e9bac;
}
.block1:hover {
  background-color: #d8eaee;
}

.block2 {
  background-color: #248cff;
}
.block2:hover {
  background-color: #f0f7ff;
}

.block3 {
  background-color: #3b5998;
}
.block3:hover {
  background-color: #bbc8e4;
}

【讨论】：