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…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...