当前位置：首页 > news >正文

SASS 简化代码开发的基本方法

news 2026/1/12 14:15:29

概要

本文以一个按钮开发的实例，介绍如何使用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 &…...

编程日记 2025/1/8 9:02:02

40.TryParse尝试转化为int类型 C#例子

也许这个时候学有点晚，但是不管怎样都学了尝试转化，不能转化就返回bool类型的假它会直接给括号里面的int类型赋值代码： using System; using System.Timers; public class Program {static void Main(){int a;bool i;while (true){Get…...

编程日记 2025/1/8 8:59:59

【微服务】2、网关

Spring Cloud微服务网关技术介绍单体项目拆分微服务后的问题服务地址问题：单体项目端口固定（如黑马商城为8080），拆分微服务后端口各异（如购物车808、商品8081、支付8086等）且可能变化，前端难…...

编程日记 2025/1/8 8:58:56

红队-shell编程篇（上）

声明通过学习泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,做出的文章如涉及侵权马上删除文章笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负一、建立Shell文件 1. Shell简介 Shell是一种命令行界面&am…...

编程日记 2025/1/8 8:54:47

电子价签会是零售界的下一个主流？【新立电子】

电子价签，作为一种能够替代传统纸质标签的数字显示屏，已经在零售行业中展现出其巨大的潜力。它具有实时更新、集中管理、高效节能的特点，实现价格的实时更新，大大减少更新价格的工作量和时间。为消费者带来更加便捷、准确的购物体…...

编程日记 2025/1/8 8:52:43

5 分布式ID

这里讲一个比较常用的分布式防重复的ID生成策略，雪花算法一个用户体量比较大的分布式系统必然伴随着分表分库，分机房部署，单体的部署方式肯定是承载不了这么大的体量。雪花算法的结构说明如下图所示: 雪花算法组成从上图我们可以看…...

编程日记 2025/1/8 8:50:41

SpringBoot | @Autowired 和 @Resource 的区别及原理分析

关注：CodingTechWork 引言在Spring框架中，Autowired 和 Resource 是两种常用的依赖注入注解，它们都用于自动装配Bean，简化了开发者手动创建和管理Bean的繁琐工作。然而，它们的实现机制和使用方式有所不同。理解这两者…...

编程日记 2025/1/8 8:48:34

『SQLite』解释执行（Explain）

摘要：本节主要讲解SQL的解释执行：Explain。在 sqlite 语句之前，可以使用 “EXPLAIN” 关键字或 “EXPLAIN QUERY PLAN” 短语，用于描述表查询的细节。基本语法 EXPLAIN 语法： EXPLAIN [SQLite Query]EXPLAIN QUER…...

编程日记 2025/1/8 8:46:31

0基础学前端-----CSS DAY12

视频参考：B站Pink老师今天是CSS学习的第十二天，今天开始的笔记对应Pink老师课程中的CSS第七天的内容。本节重点：CSS高级技巧本章目录本节目标1. 精灵图1.1 为什么需要精灵图1.2 精灵图使用案例：拼出自己的名字 2. 字体图标2.…...

编程日记 2025/1/8 8:43:26

（概率论）无偏估计

参考文章：(15 封私信 / 51 条消息) 什么是无偏估计？ - 知乎 (zhihu.com) 首先，第一个回答中，马同学图解数学讲解得很形象， 我的概括是：“注意，有一个总体的均值u。然后，如果抽样n个&…...

编程日记 2025/1/8 8:42:25

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…...

编程日记 2025/1/8 8:41:24

利用Java爬取1688商品详情API接口：技术与应用指南

引言 1688作为中国领先的B2B电子商务平台，拥有海量的商品信息。对于商家和市场研究人员来说，能够从1688获取商品详情信息，对于市场分析、竞品研究等具有重要价值。本文将详细介绍如何使用Java编写爬虫程序，以合法、高效的方式获取…...

编程日记 2025/1/8 8:35:17

基于MATLAB的汽车热管理模型构建

一、引言汽车热管理系统对汽车性能、部件寿命及驾乘体验至关重要。它能确保发动机、电池等关键部件在适宜温度工作。MATLAB 功能强大，为构建高精度热管理模型提供有效途径，助力优化系统设计与控制策略。二、汽车热管理系统构成 2.1 发动机冷却系统&…...

编程日记 2025/1/8 8:33:13

LRU（1）

LRU是"Least Recently Used"(最近最少使用)的缩写，它是一种常用的页面置换算法和缓存淘汰策略。当计算机系统的内存或缓存资源有限时，LRU算法根据的历史访问记录来决定哪些数据应该被保留在内存或缓存中，哪些被淘汰。其核心思想是“…...

编程日记 2025/1/8 8:32:12

VSCode 使用鼠标滚轮控制字体

一、文件 | 首选项 | 设置二、单击在 settings.json中编辑 "editor.mouseWheelZoom": true 注注注意：保存哦！ctrlS 三、测试按住ctrl鼠标滚轮，控制字体大小...

编程日记 2025/1/8 8:31:11

数据库（3）--针对列的CRUD操作

1.Create 新增语法： insert into 表名 （列名）values （列）... 创建一个学生表用于演示： create table if not exists student( id bigint comment 编号, name varchar(20) comment 姓名 ); 1.1直接增加…...

编程日记 2025/1/8 8:29:09

【Linux】记录一下考RHCE的学习过程（七）

年底了，公司接的北京地铁轨道交通的项目做不完了，一百多列地铁的设备都得调，派我出差了几周，这几天才回来，出差累死了实在是没办法更新。（YOASOBI的二开票还没抢到ToT，哭死，看看回滚…...

编程日记 2025/1/8 8:28:08

【顶刊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…...

编程日记 2025/1/8 8:20:59

使用hardhat进行合约测试

演示源码：hardhat-demo: 演示基于hardhat的HelloWord合约测试案例。环境 NodeJs 创建工程 1.创建一个hardhat工程根目录(hardhat-demo)，然后进入该目录执行。 npx hardhat执行该命令，会进行hardhat工程初始化。提示我们是否安装该版本h…...

编程日记 2025/1/8 8:19:57

基于生成式对抗网络（GAN）的前沿研究与应用

引言人工智能（AI）领域在过去几年中经历了快速的发展，尤其是深度学习的兴起带来了许多变革。其中，生成式对抗网络（Generative Adversarial Network, GAN）因其强大的生成能力成为了研究热点。自2014年Ian G…...

编程日记 2025/1/8 8:18:56

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2026/1/12 5:10:32

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤运行安装程序： 双击下载的.exe安装文件如果出现安全提示&…...

编程新知 2025/12/30 12:17:44

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

Matlab | matlab常用命令总结

常用命令一、基础操作与环境二、矩阵与数组操作（核心）三、绘图与可视化四、编程与控制流五、符号计算 (Symbolic Math Toolbox)六、文件与数据 I/O七、常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/12/25 18:03:56

06 Deep learning神经网络编程基础激活函数 --吴恩达

深度学习激活函数详解一、核心作用引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

概要

代码和实现

附录

相关文章：