前端开发攻略---使用Sass调整颜色亮度,实现Element组件库同款按钮

目录

1、演示

 2、实现原理

3、实现代码


 

1、演示

 2、实现原理

改变颜色亮度的原理是通过调整颜色的 RGB 值中的亮度部分来实现的。在 Sass 中,可以使用颜色函数来操作颜色的 RGB 值,从而实现亮度的调整。

具体来说,亮度调整函数通常会改变颜色的亮度部分,而保持其色调和饱和度不变。例如,在增加亮度时,RGB 值中的每个分量都会增加,使颜色变得更亮;在减少亮度时,RGB 值中的每个分量都会减少,使颜色变得更暗。

Sass 中的 lighten() 和 darken() 函数就是用来实现这一目的的,它们会根据指定的百分比调整颜色的亮度。这样,通过使用这些函数,就可以轻松地改变颜色的亮度,而不必手动计算 RGB 值的调整量。

3、实现代码

<template>
  <div>
    <a class="button1">按钮1</a>
    <a class="button2">按钮2</a>
    <a class="button3">按钮3</a>
    <a class="button4">按钮4</a>
    <a class="button5">按钮5</a>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
</script>

<style scoped lang="scss">
a {
  display: inline-block;
  margin: 20px;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
@function adjust-color($color, $amount, $lighten: true) {
  @if $lighten {
    @return lighten($color, $amount);
  } @else {
    @return darken($color, $amount);
  }
}

@mixin hoverStyle($base-color, $hover-amount, $lighten) {
  background-color: $base-color;
  &:hover {
    background-color: adjust-color($base-color, $hover-amount, $lighten);
  }
}
@mixin activeStyle($base-color, $hover-amount, $lighten) {
  background-color: $base-color;
  &:active {
    background-color: adjust-color($base-color, $hover-amount, $lighten);
  }
}

.button1 {
  @include hoverStyle(#266fff, 20%, true);
  @include activeStyle(#266fff, 20%, false);
}
.button2 {
  @include hoverStyle(#ffae00, 20%, true);
  @include activeStyle(#ffae00, 20%, false);
}
.button3 {
  @include hoverStyle(#86f203, 20%, true);
  @include activeStyle(#86f203, 20%, false);
}
.button4 {
  @include hoverStyle(#00ccff, 20%, true);
  @include activeStyle(#00ccff, 20%, false);
}
.button5 {
  @include hoverStyle(#f702eb, 20%, true);
  @include activeStyle(#f702eb, 20%, false);
}
</style>

 代码解释:

  1. @function adjust-color($color, $amount, $lighten: true) { ... }: 这个函数根据提供的颜色值、调整量和一个可选的布尔值参数来调整颜色的亮度。如果 $lighten 参数为真,则使用 Sass 内置的 lighten() 函数增加颜色的亮度;否则,使用 darken() 函数减少颜色的亮度。函数返回调整后的颜色值。

  2. @mixin hoverStyle($base-color, $hover-amount, $lighten) { ... }: 这个 mixin 用于创建按钮的鼠标悬停样式。它接受基础颜色、悬停时调整的量和一个布尔值参数来确定是增加还是减少亮度。在按钮上设置了初始背景颜色,以及在悬停时调整后的背景颜色。

  3. @mixin activeStyle($base-color, $hover-amount, $lighten) { ... }: 这个 mixin 用于创建按钮的激活(按下)样式,它接受与 hoverStyle 相同的参数,并在按钮激活时应用颜色调整。

  4. .button1.button2.button3.button4.button5: 这些类定义了具体的按钮样式,它们分别调用了 hoverStyle 和 activeStyle mixin,并传入不同的颜色值和调整量参数,以及一个布尔值参数来确定是增加还是减少亮度。

上一篇:学习方法的重要性


下一篇:R语言:r画韦恩图