代码之家 › 专栏 › 技术社区 › Daiaiai

通过scs悬停来点亮单个背景色-如何?

sass css

-1

Daiaiai · 技术社区 · 11 年前

我有一些背景颜色不同的块(在变量中设置),如果用户悬停在其中一个块上,颜色会稍微变淡。

因此,我使用这个:

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

但这只是将一种静态颜色($color1)褪色至40%。如果.block1设置了$color1,.block2设置了$colour2作为背景色,我该怎么做?所以结果应该是

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

因此,我需要使用什么?

2 回复 | 直到 11 年前

Josh Burgess 11 年前

使用mixin,如下所示:

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

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

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

allejo 11 年前

在SCSS中,没有特殊的方法来编写示例中的CSS,这就是您的方法。但是如果您想优化并编写更少的代码,那么您可以利用SASS的哈希图和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;
}

推荐文章