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…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
毫米波雷达基础理论（3D+4D）
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化
是不是受够了安装了oracle database之后sqlplus的简陋，无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话，配置.bahs_profile后也能解决上下翻页这些，但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可，…...