scss mixin用于缓动动画

Posted 2021-05-17

In Sass, you can set-up `mixin` functions which define a set of styles.  That mixin can be called elsewhere in your SCSS stylesheet using `@include` to apply that mixin's styling.

In this case, we're setting up a mixin which will handle the application of a transition effect wherever it's called.

@mixin easeOut {
  transition: all 0.5s ease-out;
}

a {
  padding: 0.4rem;
  
  // Call the mixin when an anchor element is hovered over
  &:hover {
    color: $secondary-color;
    @include easeOut;
  }
}