SASS 简化代码开发的基本方法
概要
本文以一个按钮开发的实例，介绍如何使用SASS来简化CSS代码开发的。
代码和实现
我们希望通过CSS开发下面的代码样式，从样式来看，每个按钮的基本样式相同，就是颜色不同。
如果按照传统的方式开发，需要开发btn ，btn-primary，btn-danger和btn-succsess四个类，比较麻烦，所以先将公共样式提取出来，放到btn类中。
在btn类中，封装所有公共样式，代码如下：
btn{font-size: 1rem;font-weight: 400;padding:.375rem .75rem;line-height: 1.5;text-align: center;vertical-align:middle;text-decoration: none;user-select: none;border-radius: .375rem;cursor: pointer;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
每个按钮主要区别是颜色不同，每个按钮的颜色在active，disabled和hover时候，也会有一些差异，如果一个类一个类的写，显然比较麻烦。因此先将这些颜色通过SASS的变量定义出来：
$buttons:("type":"primary", "bgColor": #0d6efd, "fontColor": #fff, "borderColor":#0d6efd),
("type":"success", "bgColor": #198754, "fontColor": #fff, "borderColor":#198754),
("type":"danger", "bgColor": #dc3545, "fontColor": #fff, "borderColor":#dc3545),
("type":"warning", "bgColor": #ffc107, "fontColor": #fff, "borderColor":#ffc720),
("type":"info", "bgColor": #0dcaf0, "fontColor": #000,"borderColor": #25cff2);
通过循环遍历，一次生成所有需要的类。
对于按钮在hover，disabled和active状态下，颜色略有区别的需求，我们可以先设置一个基准颜色，再使用SASS的颜色函数lighten和darken将基准颜色变深或变浅。
@each $btn in $buttons {.btn-#{map.get($btn,"type")}{@extend .btn;background-color: map.get($btn,"bgColor");border:1px solid map.get($btn,"borderColor");color: map.get($btn,"fontColor");;&:hover {background-color: lighten(map.get($btn,"bgColor"), 10%);border:1px solid lighten(map.get($btn,"borderColor"), 10%);color: map.get($btn,"fontColor");}&:disabled{background-color: lighten(map.get($btn,"bgColor"), 20%);border:1px solid lighten(map.get($btn,"borderColor"), 20%);color: map.get($btn,"fontColor");}&:active {background-color: darken(map.get($btn,"bgColor"), 10%);border:1px solid darken(map.get($btn,"borderColor"), 10%);;color: map.get($btn,"fontColor");}}
}
对于生成CSS类，以btn-primary为例，它和btn类的关系应该是继承关系，因此使用@extend，编译后生成的CSS代码如下：
.btn, .btn-primary {font-size: 1rem;font-weight: 400;padding: 0.375rem 0.75rem;line-height: 1.5;text-align: center;vertical-align: middle;text-decoration: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;border-radius: 0.375rem;cursor: pointer;transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}.btn-primary {background-color: #0d6efd;border: 1px solid #0d6efd;color: #fff;
}
此处推荐使用@extend，如果使用@mixin，生成的CSS代码并不合理。
如果使用@mixin，生成的CSS代码如下：
.btn-primary {font-size: 1rem;font-weight: 400;padding: 0.375rem 0.75rem;line-height: 1.5;text-align: center;vertical-align: middle;text-decoration: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;border-radius: 0.375rem;cursor: pointer;transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;background-color: #0d6efd;border: 1px solid #0d6efd;color: #fff;
}
.btn-primary:hover {background-color: #408cfd;border: 1px solid #408cfd;color: #fff;
}
.btn-primary:disabled {background-color: #72abfe;border: 1px solid #72abfe;color: #fff;
}
.btn-primary:active {background-color: #0257d5;border: 1px solid #0257d5;color: #fff;
}可以看到公共样式被定义到了每个具体的类中，造成了大量冗余的代码。
附录
html代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Buttons</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="buttons"><button class="btn btn-primary">Primary</button><button class="btn btn-success">Success</button><button class="btn btn-danger">Danger</button><button class="btn btn-warning">Warning</button><button class="btn btn-info">Info</button> </div>
</body>
</html>
SASS代码：
@use "sass:map";
* {padding: 0;margin: 0;box-sizing: border-box;
}.btn{font-size: 1rem;font-weight: 400;padding:.375rem .75rem;line-height: 1.5;text-align: center;vertical-align:middle;text-decoration: none;user-select: none;border-radius: .375rem;cursor: pointer;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}$buttons:("type":"primary", "bgColor": #0d6efd, "fontColor": #fff, "borderColor":#0d6efd),
("type":"success", "bgColor": #198754, "fontColor": #fff, "borderColor":#198754),
("type":"danger", "bgColor": #dc3545, "fontColor": #fff, "borderColor":#dc3545),
("type":"warning", "bgColor": #ffc107, "fontColor": #fff, "borderColor":#ffc720),
("type":"info", "bgColor": #0dcaf0, "fontColor": #000,"borderColor": #25cff2);
@each $btn in $buttons {.btn-#{map.get($btn,"type")}{@extend .btn;background-color: map.get($btn,"bgColor");border:1px solid map.get($btn,"borderColor");color: map.get($btn,"fontColor");;&:hover {background-color: lighten(map.get($btn,"bgColor"), 10%);border:1px solid lighten(map.get($btn,"borderColor"), 10%);color: map.get($btn,"fontColor");}&:disabled{background-color: lighten(map.get($btn,"bgColor"), 20%);border:1px solid lighten(map.get($btn,"borderColor"), 20%);color: map.get($btn,"fontColor");}&:active {background-color: darken(map.get($btn,"bgColor"), 10%);border:1px solid darken(map.get($btn,"borderColor"), 10%);;color: map.get($btn,"fontColor");}}
}
相关文章：
SASS 简化代码开发的基本方法
概要 本文以一个按钮开发的实例，介绍如何使用SASS来简化CSS代码开发的。 代码和实现 我们希望通过CSS开发下面的代码样式，从样式来看，每个按钮的基本样式相同，就是颜色不同。 如果按照传统的方式开发，需要开发btn &…...
40.TryParse尝试转化为int类型 C#例子
也许这个时候学有点晚，但是不管怎样都学了 尝试转化，不能转化就返回bool类型的假 它会直接给括号里面的int类型赋值 代码： using System; using System.Timers; public class Program {static void Main(){int a;bool i;while (true){Get…...
【微服务】2、网关
Spring Cloud微服务网关技术介绍 单体项目拆分微服务后的问题 服务地址问题：单体项目端口固定（如黑马商城为8080），拆分微服务后端口各异（如购物车808、商品8081、支付8086等）且可能变化，前端难…...
红队-shell编程篇（上）
声明 通过学习 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,做出的文章如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一、建立Shell文件 1. Shell简介 Shell是一种命令行界面&am…...
电子价签会是零售界的下一个主流？【新立电子】
电子价签，作为一种能够替代传统纸质标签的数字显示屏，已经在零售行业中展现出其巨大的潜力。它具有实时更新、集中管理、高效节能的特点，实现价格的实时更新，大大减少更新价格的工作量和时间。为消费者带来更加便捷、准确的购物体…...
5 分布式ID
这里讲一个比较常用的分布式防重复的ID生成策略，雪花算法 一个用户体量比较大的分布式系统必然伴随着分表分库，分机房部署，单体的部署方式肯定是承载不了这么大的体量。 雪花算法的结构说明 如下图所示: 雪花算法组成 从上图我们可以看…...
SpringBoot | @Autowired 和 @Resource 的区别及原理分析
关注：CodingTechWork 引言 在Spring框架中，Autowired 和 Resource 是两种常用的依赖注入注解，它们都用于自动装配Bean，简化了开发者手动创建和管理Bean的繁琐工作。然而，它们的实现机制和使用方式有所不同。理解这两者…...
『SQLite』解释执行（Explain）
摘要：本节主要讲解SQL的解释执行：Explain。 在 sqlite 语句之前，可以使用 “EXPLAIN” 关键字或 “EXPLAIN QUERY PLAN” 短语，用于描述表查询的细节。 基本语法 EXPLAIN 语法： EXPLAIN [SQLite Query]EXPLAIN QUER…...
0基础学前端-----CSS DAY12
视频参考：B站Pink老师 今天是CSS学习的第十二天，今天开始的笔记对应Pink老师课程中的CSS第七天的内容。 本节重点：CSS高级技巧 本章目录 本节目标1. 精灵图1.1 为什么需要精灵图1.2 精灵图使用案例：拼出自己的名字 2. 字体图标2.…...
（概率论）无偏估计
参考文章：(15 封私信 / 51 条消息) 什么是无偏估计？ - 知乎 (zhihu.com) 首先，第一个回答中，马同学图解数学讲解得很形象， 我的概括是：“注意，有一个总体的均值u。然后，如果抽样n个&…...
Minio-Linux-安装
文章目录 1.Linux安装1.下载源码包2.上传到/usr/local/minio1.进入目录2.上传 3.开放执行权限4.创建minio文件存储目录及日志目录5.编写启动的shell脚本1.脚本编写2.赋予执行权限 6.启动！1.执行run脚本2.查看日志3.开放9001和9000端口1.服务器2.安全组3.访问&#x…...
利用Java爬取1688商品详情API接口：技术与应用指南
引言 1688作为中国领先的B2B电子商务平台，拥有海量的商品信息。对于商家和市场研究人员来说，能够从1688获取商品详情信息，对于市场分析、竞品研究等具有重要价值。本文将详细介绍如何使用Java编写爬虫程序，以合法、高效的方式获取…...
基于MATLAB的汽车热管理模型构建
一、引言 汽车热管理系统对汽车性能、部件寿命及驾乘体验至关重要。它能确保发动机、电池等关键部件在适宜温度工作。MATLAB 功能强大，为构建高精度热管理模型提供有效途径，助力优化系统设计与控制策略。 二、汽车热管理系统构成 2.1 发动机冷却系统&…...
LRU（1）
LRU是"Least Recently Used"(最近最少使用)的缩写，它是一种常用的页面置换算法和缓存淘汰策略。当计算机系统的内存或缓存资源有限时，LRU算法根据的历史访问记录来决定哪些数据应该被保留在内存或缓存中，哪些被淘汰。其核心思想是“…...
VSCode 使用鼠标滚轮控制字体
一、 文件 | 首选项 | 设置 二、单击在 settings.json中编辑 "editor.mouseWheelZoom": true 注注注意：保存哦！ctrlS 三、测试 按住ctrl鼠标滚轮，控制字体大小...
数据库（3）--针对列的CRUD操作
1.Create 新增 语法： insert into 表名 （列名）values （列）... 创建一个学生表用于演示： create table if not exists student( id bigint comment 编号, name varchar(20) comment 姓名 ); 1.1直接增加…...
【Linux】记录一下考RHCE的学习过程（七）
年底了，公司接的北京地铁轨道交通的项目做不完了，一百多列地铁的设备都得调，派我出差了几周，这几天才回来，出差累死了实在是没办法更新。（YOASOBI的二开票还没抢到ToT，哭死，看看回滚…...
【顶刊TPAMI 2025】多头编码（MHE）之极限分类 Part 1：背景动机
目录 1 简单概括2 几个重要发现3 主要贡献4 背景知识5 方法简介 论文：Multi-Head Encoding for Extreme Label Classification 作者：Daojun Liang, Haixia Zhang, Dongfeng Yuan and Minggao Zhang 单位：山东大学 代码：https://gi…...
使用hardhat进行合约测试
演示源码：hardhat-demo: 演示基于hardhat的HelloWord合约测试案例。 环境 NodeJs 创建工程 1.创建一个hardhat工程根目录(hardhat-demo)，然后进入该目录执行。 npx hardhat执行该命令，会进行hardhat工程初始化。 提示我们是否安装该版本h…...
基于生成式对抗网络（GAN）的前沿研究与应用
引言 人工智能（AI）领域在过去几年中经历了快速的发展，尤其是深度学习的兴起带来了许多变革。其中，生成式对抗网络（Generative Adversarial Network, GAN）因其强大的生成能力成为了研究热点。自2014年Ian G…...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
Spring Boot + MyBatis 集成支付宝支付流程
Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例（电脑网站支付） 1. 添加依赖 <!…...
深入浅出WebGL：在浏览器中解锁3D世界的魔法钥匙
WebGL：在浏览器中解锁3D世界的魔法钥匙 引言：网页的边界正在消失 在数字化浪潮的推动下，网页早已不再是静态信息的展示窗口。如今，我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室，甚至沉浸式的V…...
Qwen系列之Qwen3解读：最强开源模型的细节拆解
文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...