通过scss悬停来减轻个别背景颜色 - 如何?

时间:2015-03-11 14:49:35

标签: css sass

我有一些具有不同背景颜色的块(在变量中设置),如果用户将其中一个悬停,则颜色会亮/淡一点。

因此我使用这个:

.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%);
    }

因此我需要使用什么?

2 个答案:

答案 0 :(得分:0)

使用mixin,如下所示:

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

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

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

答案 1 :(得分:0)

没有什么特别的方法来编写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;
}