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

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

news 2026/4/12 12:38:50

概要

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

ROS2 bag数据再利用：除了Rviz，如何用PCD点云文件做离线分析和算法测试？

ROS2 bag数据深度利用：解锁PCD点云文件的离线分析与算法测试新场景当你在ROS2生态中积累了数百GB的传感器数据后，是否曾思考过这些.db3文件里封存的点云数据还能创造哪些超出实时可视化之外的价值？传统Rviz回放只是数据应用的起点&#xff0…...

编程新知 2026/4/12 11:55:53

用TensorFlow和BERT实战：从海量安全报告中自动提取攻击技战术（TTPs）

基于TensorFlow与BERT的自动化TTPs提取系统实战指南当安全团队每天需要处理数百份威胁报告时，人工提取攻击技战术（TTPs）的效率瓶颈就会暴露无遗。本文将展示如何构建一个能自动解析安全报告、识别关键攻击模式的智能系统，这套方案…...

编程新知 2026/4/12 11:01:18

AcousticSense AI算力优化：批处理+FP16混合精度使吞吐量提升3.2倍

AcousticSense AI算力优化：批处理FP16混合精度使吞吐量提升3.2倍 1. 引言：当音乐分析遇上性能瓶颈想象一下，你正在搭建一个音乐流派的智能分析平台。用户上传一首歌，系统需要快速、准确地告诉你这首歌是摇滚、爵士还是电子乐。…...

编程新知 2026/4/12 9:55:34

Qwen3.5-4B-Claude-Opus商业应用：SaaS产品嵌入式AI助手轻量级方案

Qwen3.5-4B-Claude-Opus商业应用：SaaS产品嵌入式AI助手轻量级方案 1. 产品概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一款专为商业场景优化的轻量级AI推理模型，基于Qwen3.5-4B架构进行深度蒸馏优化，特别强化了结构化分析…...

编程新知 2026/4/12 8:39:27

Phi-4-mini-reasoning部署教程：防火墙/端口映射/开机自启全配置

Phi-4-mini-reasoning部署教程：防火墙/端口映射/开机自启全配置 1. 项目介绍 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型，专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这款模型主打"小参数、强推理、长上下文、低延迟"…...

编程新知 2026/4/12 7:53:03

SecGPT-14B惊艳效果：对TLS握手失败日志进行证书链异常与中间人检测

SecGPT-14B惊艳效果：对TLS握手失败日志进行证书链异常与中间人检测 1. 引言：当AI遇到网络安全想象一下这个场景：你的服务器日志里突然出现了一堆TLS握手失败的记录。作为运维或安全工程师，你的第一反应是什么？是手动…...

编程新知 2026/4/12 7:01:56

Spring Boot AOP 异步执行性能优化

Spring Boot AOP 异步执行性能优化在现代高并发系统中，性能优化是开发者必须面对的挑战之一。Spring Boot作为Java生态中广泛使用的框架，其AOP（面向切面编程）功能为业务逻辑的解耦提供了便利，但同步执行的AOP可能成为…...

编程新知 2026/4/12 6:53:41

乙巳马年春联生成终端Matlab仿真应用：传统文化与计算科学的结合

乙巳马年春联生成终端Matlab仿真应用：传统文化与计算科学的结合春节贴春联，是传承千年的文化习俗。一副好的春联，既要对仗工整、平仄协调，又要蕴含美好的寓意。如今，随着人工智能技术的发展，我们有了新的…...

编程新知 2026/4/12 6:12:25

3步搞定Phi-3-mini-4k-instruct-gguf在WSL中的部署与调用

3步搞定Phi-3-mini-4k-instruct-gguf在WSL中的部署与调用 1. 引言想在Windows系统上快速体验Phi-3-mini模型？通过WSL（Windows Subsystem for Linux）环境部署是个不错的选择。本文将带你用最简单的方式，在WSL中完成Phi-3-mini-4…...

编程新知 2026/4/12 6:12:23

影墨·今颜新手必看：零基础玩转‘泼墨创作’式AI人像生成

影墨今颜新手必看：零基础玩转‘泼墨创作’式AI人像生成想用AI生成一张媲美专业摄影的人像大片，但总觉得画面假假的，有种说不出的“塑料感”？试试看，用“泼墨”的方式创作一张照片。这不是比喻。今天要介绍的「影墨…...

编程新知 2026/4/12 6:06:17

概要

代码和实现

附录

相关文章：