526互联

scss小技巧-创建公用的 hover 和 active mixins

发布时间 2024-01-09 19:47:52作者: 被咯苏州

在日常的项目开发中，我们经常会遇到需要对元素跟:hover 和 :active 有交互的情况。在多处写类似的代码既繁琐又容易引起代码冗余。那么我们如何解决这个问题呢？

当然，想象一下如果能有一种方法，让你在定义样式时只需写一次，又可以在任何需要的地方重用，会是多么理想。

首先，我们先来看看一段普通的代码：

@media (hover: hover) {
    &:hover {
      color: #fff;
      background: #4298f7;
    }
  }

  &:active {
    color: #fff;
    background: #206dff;
  }

看上去并无问题，但是容易产生大量重复的代码。通过使用 SCSS 的 mixin 功能，我们可以将样式抽取出来，定义成可以重用的 mixin：

@mixin nor-hover-active($nor-style, $hover-style, $active-style) {
  @each $property, $value in $nor-style {
    #{$property}: $value;
  }
  @media (hover: hover) {
    &:hover {
      @each $property, $value in $hover-style {
        #{$property}: $value;
      }
    }
  }

  &:active {
    @each $property, $value in $active-style {
      #{$property}: $value;
    }
  }
}

然后，我们只需要在需要的地方 include 这个 mixin，并传入相应的样式就可以了：

@use '../../common.scss' as common;

@include common.nor-hover-active(
    (
      background: #fff,
    ),
    (
      background: #000,
    ),
    (
      background: red,
    )
  );

使用 Scss 的 mixin 功能，可以帮助我们简化 CSS 的编写，让代码更简洁，易于管理。希望你能从这篇文章中受益