前端开发攻略---使用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://xiahunao.cn/news/3018916.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Python实战点云并行化处理

LAS 及其压缩版本 LAZ 是用于存储点云信息的流行文件格式&#xff0c;通常由 LiDAR 技术生成。 LiDAR&#xff08;即光探测和测距&#xff09;是一种遥感技术&#xff0c;用于测量距离并创建物体和景观的高精度 3D 地图。存储的点云信息主要包括X、Y、Z坐标、强度、颜色、特征分…

博睿数据将出席ClickHouse Hangzhou User Group第1届 Meetup

2024年5月18日&#xff0c;博睿数据数智能力中心负责人李骅宸将受邀参加ClickHouse Hangzhou User Group第1届 Meetup活动&#xff0c;分享《ClickHouse在可观测性的应用实践和优化》的主题演讲。 在当前数字化浪潮下&#xff0c;数据的规模和复杂性不断攀升&#xff0c;如何高…

人大金仓报The connection attempt failed.Reason:Connection reset解决办法

在连接人大京仓数据库 的时候报下面的错误 解决办法&#xff1a; 更换这里的IP地址就行&#xff0c;不要用127.0.0.1&#xff0c;然后就可以了

XSS、CSRF、SSRF漏洞原理以及防御方式_xss csrf ssrf

这里写目录标题 XSS XSS攻击原理&#xff1a;XSS的防范措施主要有三个&#xff1a;编码、过滤、校正 CSRF CSRF攻击攻击原理及过程如下&#xff1a;CSRF攻击的防范措施&#xff1a; SSRF SSRF漏洞攻击原理以及方式SSRF漏洞攻击的防范措施 XMLXSS、CSRF、SSRF的区别 XSS、CSRF的…

成都百洲文化传媒有限公司电商服务的新领军者

在数字化浪潮席卷全球的今天&#xff0c;电商行业以其独特的魅力和无限的可能性&#xff0c;成为了推动经济发展的重要引擎。在这个竞争激烈的市场中&#xff0c;成都百洲文化传媒有限公司凭借其专业的电商服务和前瞻性的战略布局&#xff0c;正迅速崛起为行业的新领军者。 一…

图算法必备指南:《图算法:行业应用与实践》全面解读,解锁主流图算法奥秘!

《图算法&#xff1a;行业应用与实践》于近日正式与读者见面了&#xff01; 该书详解6大类20余种经典的图算法的原理、复杂度、参数及应用&#xff0c;旨在帮助读者在分析和处理各种复杂的数据关系时能更好地得其法、善其事、尽其能。 全书共分为10章&#xff1a; 第1~3章主要…

PGP加密技术:保护信息安全的利器

随着数字化时代的到来&#xff0c;个人和企业对信息安全的需求日益增长。PGP&#xff08;Pretty Good Privacy&#xff09;加密技术作为一项强大的加密工具&#xff0c;为保护敏感数据提供了一种有效的方法。本文将探讨PGP加密技术的基本原理、应用场景以及其在现代信息安全中的…

Linux入门攻坚——22、通信安全基础知识及openssl、CA证书

Linux系统常用的加解密工具&#xff1a;OpenSSL&#xff0c;gpg&#xff08;是pgp的实现&#xff09; 加密算法和协议&#xff1a; 对称加密&#xff1a;加解密使用同一个秘钥&#xff1b; DES&#xff1a;Data Encryption Standard&#xff0c;数据加密标准&…

无人机运营合格证:民用无人机驾驶航空器运营合格证书

无人机运营合格证是指经国家相关部门审核通过并颁发给相应无人驾驶航空器运营机构的一种资质证明。获得该证书的机构具备相关的技术和管理能力&#xff0c;能够安全、合规地运营无人驾驶航空器。 无人机运营合格证的申请流程一般包括报名、培训学习、考试准备、考试报名、考试…

无人机+垂直起降:微型共轴双旋翼无人机技术详解

微型共轴双旋翼无人机技术是一种独特的无人机设计&#xff0c;它结合了垂直起降&#xff08;VTOL&#xff09;能力和微型无人机的灵活性。这种设计允许无人机在无需跑道的情况下垂直起降&#xff0c;并具备在空中悬停和执行各种飞行动作的能力。 适用于集群控制&#xff0c;荷载…

华为OD机试【全量和已占用字符集】(java)(100分)

1、题目描述 给定两个字符集合&#xff0c;一个是全量字符集&#xff0c;一个是已占用字符集&#xff0c;已占用字符集中的字符不能再使用。 2、输入描述 输入一个字符串 一定包含&#xff0c;前为全量字符集 后的为已占用字符集&#xff1b;已占用字符集中的字符一定是全量…

1756jsp农产品销售管理系统Myeclipse开发mysql数据库C2C模式java编程计算机网页项目沙箱支付

一、源码特点 java 农产品销售管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用web模式&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0…

压缩损失来源-量化噪声

压缩损失会以多种方式表现出来并会导致视觉损失。这里讨论最常见的压缩损失——量化噪声。量化是将大量输入值映射到较小集合的过程&#xff0c;如将输入值四舍五入为某个精度单位的值。 执行量化的设备或算法称为量化器。量化过程引入的舍入误差即量化误差或量化噪声。量化误差…

12个最强悍的数字孪生软件

数字孪生软件是一种尖端技术&#xff0c;可创建物理资产、系统或流程的虚拟表示。工程师、城市规划者、制造商和无数其他专业人士使用它来模拟、监控和分析数字环境中的真实场景。通过这样做&#xff0c;他们可以预测潜在问题、测试解决方案并简化操作&#xff0c;确保现实世界…

Linux网络编程(三)IO复用一 select系统调用

I/O复用使得程序能同时监听多个文件描述符。在以下场景中需要使用到IO复用技术&#xff1a; 客户端程序要同时处理多个socket&#xff0c;非阻塞connect技术客户端程序要同时处理用户输入和网络连接&#xff0c;聊天室程序TCP服务器要同时处理监听socket和连接socket服务器要同…

算法学习:数组 vs 链表

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f3af; 引言&#x1f6e0;️ 内存基础什么是内存❓内存的工作原理 &#x1f3af; &#x1f4e6; 数组&#xff08;Array&#xff09;&#x1f4d6; 什么是数组&#x1f300; 数组的存储&#x1f4dd; 示例代码&#…

运放的同相与反相放大

反相放大器 同相端接地&#xff0c;电压为 0&#xff0c;反相端和同相端虚短&#xff0c;因此也是 0 V 的电压&#xff0c;同时由于虚断&#xff0c;几乎没有电流注入&#xff0c;所以R 1 和R 2 相当于串联&#xff0c;电阻上的电流相等 因此可以求出输入输出关系式为 V o u t…

excel如何将多列数据转换为一列?

这个数据整理借用数据透视表也可以做到&#xff1a; 1.先将数据源的表头补齐&#xff0c;“姓名” 2.点击插入选项卡&#xff0c;数据透视表&#xff0c;在弹出对话框中&#xff0c;数据透视位置选择 现有工作表&#xff0c;&#xff08;实际使用时新建也没有问题&#xff09;…

免费分享一套微信小程序在线订餐(点餐)配送系统(SpringBoot+Vue),帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序在线订餐(点餐)配送系统(SpringBootVue)&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序在线订餐(点餐)配送系统(SpringBootVue) Java毕业设计_哔哩哔哩_bilibili【免费】微信小程序在…

每日OJ题_贪心算法三⑥_力扣738. 单调递增的数字

目录 力扣738. 单调递增的数字 解析代码 力扣738. 单调递增的数字 738. 单调递增的数字 难度 中等 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0…