前端开发攻略---使用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,并传入不同的颜色值和调整量参数,以及一个布尔值参数来确定是增加还是减少亮度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/8956.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

武汉星起航:展望跨境电商新篇章,创新发展助力品牌国际化

随着全球经济一体化的深入发展&#xff0c;跨境电商行业正迎来前所未有的发展机遇。在这个充满机遇的时代&#xff0c;武汉星起航电子商务有限公司以其独特的自营亚马逊跨境电商模式和卖家孵化服务&#xff0c;成为了行业内的一股强劲力量。展望未来&#xff0c;武汉星起航将继…

VLM与基础分割模型的联合使用

最近做的项目里有涉及大模型&#xff0c;里面有一部分的功能是&#xff1a; 将图片输入VLM(视觉语言模型&#xff0c;我使用的是llava)&#xff0c;询问图中最显著的物体&#xff0c;将其给出的答案作为基础分割模型&#xff08;我使用的是Grounded-SAM&#xff09;的text prom…

云原生测试实战-云计算大数据云原生架构容器技术Kubernetes计算机软件工程软件开发

系列文章目录 送书第一期 《用户画像&#xff1a;平台构建与业务实践》 送书活动之抽奖工具的打造 《获取博客评论用户抽取幸运中奖者》 送书第二期 《Spring Cloud Alibaba核心技术与实战案例》 送书第三期 《深入浅出Java虚拟机》 送书第四期 《AI时代项目经理成长之道》 …

Gradle报错Cause: zip END header not found,构建问题解决

问题描述 构建报错&#xff1a;Cause: zip END header not found 解决办法 File>>setting>>Build,Execution,Deployment>>Gradle 选择你本地的Gradke路径 问题解决

2024年数维杯数学建模C题思路

文章目录 1 赛题思路2 比赛日期和时间3 竞赛信息4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

拼多多投产比怎么逐步调高

提高拼多多的投产比&#xff08;ROI&#xff09;需要综合考虑多个因素&#xff0c;包括点击量、转化率、客单价以及点击花费。以下是一些有效的方法&#xff1a; 拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营销工具&#xff0c;由商家自…

8-3 html中的表单标签 select和textarea

跟学b站黑马程序员pink老师&#xff0c;之前发过长篇&#xff0c;太长不好阅读&#xff0c;拆分成短篇 8.4.3 select下拉表单元素 如果在页面中有多个选项让用户选择&#xff0c;并且想要节约页面空间&#xff0c;我们可以用<select>标签来定义下拉列表 1.<select&g…

图片批量处理:批量调整图片色调,简单方法与高级技巧

随着数字摄影和社交媒体的普及&#xff0c;我们每天都接触到大量的图片。为了提升图片的观感和视觉效果&#xff0c;对图片进行色调调整变得至关重要。而对于那些需要处理大量图片的用户来说&#xff0c;批量调整图片色调则是一个能够大大提高工作效率的功能。本文将介绍办公提…

layui 数据表格 自动定位新增行位置

由于数据表格新增行后没有到新增到当前位置 继续增加的需求&#xff1a; 因为自己是新增行后到最后一行的 所以 就定位到最后一行 并且 高亮 高亮颜色浅 可自行更改 整理了一下 可根据 情况 修改 // 初始化滚动条位置变量 let tableScroll {scrollTob: 0,scrollLeft: 0,…

【Node.js工程师养成计划】之使用Node连接MongoDB进行增删改查

一、Node连接MongoDB mongodb npm install mongodb # or ... yarn add mongodbdemo: const { MongoClient } require(mongodb); // or as an es module: // import { MongoClient } from mongodb// Connection URL const url mongodb://localhost:27017; const client ne…

PyQt程序的打包

Qt hello - 专注于Qt的技术分享平台 记录下PyQt程序的打包。 一&#xff0c;安装 pip3 install PyInstaller 二&#xff0c;打包 pyinstaller -w -n app app.py 根据需要选择打包参数&#xff0c;例如&#xff1a;-F表示生成单文件模式&#xff0c;即只有一个可执行文件…

windows驱动开发-内核调度(二)

这篇文档记录剩下的内核调度对象。 信号灯 任何驱动程序都可以使用信号量对象在其驱动程序创建的线程和其他驱动程序例程之间同步操作。 例如&#xff0c;当驱动程序没有未完成的 I/O 请求时&#xff0c;驱动程序专用线程可能会将自身置于等待状态&#xff0c;并且驱动程序的…

javaWeb入门(自用)

1. vue学习 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://unpkg.com/vue2"></script> </head> <body><div id"…

Python 使用 WeChatFerry 搭建部署微信机器人详细教程(更新中)

下载安装 wcferry 库 通过 pip 快速安装 wcferry pip install wcferry免责声明&#xff1a;仅供学习和技术研究使用&#xff0c;不得用于任何商业或非法行为&#xff0c;否则后果自负。 基本原理 当微信收到消息时&#xff0c;抢在微信处理&#xff08;显示到页面&#xff0…

C++与java回调函数用法区别实例(二百七十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Netty 实现dubbo rpc

一、RPC 的基本介绍 RPC (Remote Procedure Call) 远程过程调用&#xff0c;是一个计算机通信协议。该协议允许运行于一台计算机的程序调用另一台计算机的子程序&#xff0c;而程序员无需额外的为这个交互编程。也就是说可以达到两个或者多个应用程序部署在不同的服务器上&…

HOOPS Visualize:工业级3D可视化SDK,打造移动端和PC端工程应用程序

HOOPS Visualize是一种高性能的软件开发工具包&#xff08;SDK&#xff09;&#xff0c;旨在帮助开发人员轻松构建和集成高质量的3D可视化功能。这是一种全功能的&#xff0c;以工程为重点的场景图技术&#xff0c;我们称为Core Graphics。Core Graphics可集成到一个框架中&…

webpack从零到1 构建 vue3

为什么要手写webpack 不用cli &#xff08;无的放矢&#xff09;并不是 其实是为了加深我们对webpack 的了解方便以后灵活运用webpack 的技术 初始化项目结构&#xff08;跟cli 结构保持一致&#xff09; 新建 public src 等文件夹npm init -y 创建package.json文件tsc --init…

opencv基础篇 ——(十一)常用照片处理函数

改善图像的亮度(illuminationChange) 用于改善光照条件不佳导致的图像对比度低下或局部过暗/过亮的问题。该函数通过模拟全局和局部光照变化&#xff0c;旨在提高图像的整体视觉质量&#xff0c;特别是在低光照条件下&#xff0c;使得图像中的重要细节更加清晰可见。 函数原型…

IDEA Maven项目,控制台出现乱码的问题

前言 使用idea进行maven项目的编译时&#xff0c;控制台输出中文的时候出现乱码的情况。 通常出现这样的问题&#xff0c;都是因为编码格式不一样导致的。既然是maven出的问题&#xff0c;我们在idea中查找下看可以如何设置文件编码。 第一种方式 在pom.xml文件中&#xff…