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

CSS 预处理器 Sass

news 来源：原创 2025/7/17 5:42:17

Sass

一、Sass 是什么？

二、核心功能详解

1. 变量（Variables）

2. 嵌套（Nesting）

3. 混合宏（Mixins）

4. 继承（Inheritance）

5. 运算（Operations）

6. 函数（Functions）

7. 条件与循环

8. 模块化（Modules）

三、Sass 工具链

1. 安装与编译

2. 集成构建工具

3. VS Code 插件

四、最佳实践

五、Sass 与 Less 对比

Sass 与 Less 核心对比

一、核心对比速览

二、语法细节对比

1. 变量定义

2. 嵌套语法

3. 混合宏（Mixins）

4. 条件控制

三、功能深度对比

1. 函数与运算

2. 继承机制

3. 模块化支持

四、编译与性能

五、社区与生态

六、迁移策略

七、选型建议

Sass 内置函数

一、颜色函数

1. 颜色调整

2. 颜色混合

3. 颜色通道提取

二、数值函数

三、字符串函数

四、列表函数

五、映射函数（Map）

六、其他实用函数

七、实战示例

八、总结

Sass

一、Sass 是什么？

Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，通过增强 CSS 的语法（如变量、嵌套、混合宏等）提升代码的可维护性和开发效率。Sass 最终会编译为标准的 CSS，兼容所有浏览器。

两种语法：
- SCSS（.scss）：兼容 CSS 语法，使用 {} 和 ;。
- Sass（.sass）：缩进语法，无 {} 和 ;（较少用）。

二、核心功能详解

1. 变量（Variables）

定义变量：存储颜色、尺寸、字体等重复使用的值。
```
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
```

使用变量：

body {color: $primary-color;font-family: $font-stack;
}

2. 嵌套（Nesting）

规则嵌套：简化层级结构。

.nav {padding: 1rem;ul {margin: 0;li {display: inline-block;a {color: $primary-color;}}}
}

父选择器引用：使用 & 引用父级。

.button {&:hover { background: darken($primary-color, 10%); }&-large { padding: 20px; }
}

3. 混合宏（Mixins）

定义可复用代码块：

@mixin flex-center {display: flex;justify-content: center;align-items: center;
}

调用混合宏：
```
.container {@include flex-center;
}
```

带参数的混合宏：

@mixin box-shadow($x, $y, $blur, $color) {box-shadow: $x $y $blur $color;
}
.card {@include box-shadow(2px, 2px, 10px, rgba(0,0,0,0.1));
}

4. 继承（Inheritance）

代码复用：通过 @extend 共享样式。

%button-base {padding: 10px 20px;border-radius: 4px;
}
.primary-button {@extend %button-base;background: $primary-color;
}
.secondary-button {@extend %button-base;background: #2ecc71;
}

5. 运算（Operations）

数学运算：支持 +, -, *, /, %。

$container-width: 1200px;
.sidebar {width: $container-width / 4;
}

6. 函数（Functions）

内置函数：颜色处理、字符串操作等。

.dark-bg {background: darken($primary-color, 20%);
}

自定义函数：

@function em($px, $base: 16px) {@return ($px / $base) * 1em;
}
h1 {font-size: em(32px); // 2em
}

7. 条件与循环

@if / @else：

@mixin theme($dark: false) {@if $dark {background: #333;color: white;} @else {background: white;color: #333;}
}

@for 循环：

@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}

@each 遍历：

$colors: red, green, blue;
@each $color in $colors {.icon-#{$color} {fill: $color;}
}

@while 循环（较少用）：

$i: 1;
@while $i < 6 {.item-#{$i} { width: 20px * $i; }$i: $i + 1;
}

8. 模块化（Modules）

分文件管理：通过 @use 或 @import 导入模块。

// _variables.scss
$primary-color: #3498db;// main.scss
@use 'variables' as vars;
.header {color: vars.$primary-color;
}

三、Sass 工具链

1. 安装与编译

安装 Sass（需 Node.js）：
```
npm install -g sass
```

命令行编译：

sass input.scss output.css
sass --watch input.scss:output.css  # 监听文件变化

2. 集成构建工具

Webpack：使用 sass-loader。

// webpack.config.js
module: {rules: [{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader']}]
}

Gulp：使用 gulp-sass。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
gulp.task('sass', () => {return gulp.src('src/scss/*.scss').pipe(sass().on('error', sass.logError)).pipe(gulp.dest('dist/css'));
});

3. VS Code 插件

Live Sass Compiler：实时编译 .scss 文件为 .css。

四、最佳实践

变量命名规范：使用语义化命名（如 $brand-primary）。
模块化拆分：按功能分文件（如 _variables.scss、_mixins.scss）。
避免深层嵌套：嵌套层级不超过 3 层，防止选择器冗余。
慎用 @extend：过度继承可能导致 CSS 文件体积膨胀。
注释与文档：使用 // 或 /* */ 标注关键逻辑。

五、Sass 与 Less 对比

特性	Sass	Less
语法	支持 SCSS 和缩进语法	类似 CSS，使用 `@` 符号
功能复杂度	更强大（条件、循环、自定义函数）	较简单
社区生态	更广泛（Bootstrap 5+ 使用 Sass）	逐渐被 Sass 替代
编译速度	较快（Dart Sass）	较慢

Sass 与 Less 核心对比

一、核心对比速览

特性	Sass/SCSS	Less
语法	支持 `.scss`（类CSS）和 `.sass`（缩进语法）	类似 CSS，使用 `@` 符号定义变量等
变量符	`$`	`@`
混入（Mixins）	支持参数传递、内容块（`@content`）	支持参数传递，功能相对简单
条件/循环	支持 `@if`、`@for`、`@each`、`@while`	支持条件守卫（Guards）、循环功能较弱
函数扩展	支持自定义函数，内置函数库丰富	内置函数较少，不支持自定义函数
继承	通过 `@extend` 实现	通过混入模拟继承，无原生继承语法
模块化	通过 `@use`、`@forward` 管理依赖（推荐）	通过 `@import` 导入（可能重复代码）
编译方式	Dart Sass（快）、LibSass（弃用）	基于 JavaScript（速度较慢）
社区生态	更广泛（Bootstrap 5+、主流框架优先支持）	逐渐被 Sass 替代，维护更新较少
浏览器编译	不支持	支持（通过 `<script>` 引入 `less.js`）

二、语法细节对比

1. 变量定义

Sass：

$primary-color: #3498db;
$font-size: 16px;

Less：

@primary-color: #3498db;
@font-size: 16px;

2. 嵌套语法

Sass（支持属性嵌套）：

.box {border: {width: 1px;style: solid;color: #ddd;}
}

Less（仅支持选择器嵌套）：

.box {border-width: 1px;border-style: solid;border-color: #ddd;
}

3. 混合宏（Mixins）

Sass（支持内容块 @content）：

@mixin media($width) {@media (min-width: $width) {@content;}
}
.container {@include media(768px) {padding: 20px;}
}

Less（无内容块支持）：

.mixin(@color) {color: @color;
}
.text {.mixin(#333);
}

4. 条件控制

Sass（完整逻辑控制）：

@if lightness($color) > 50% {background: black;
} @else {background: white;
}

Less（通过守卫条件）：

.mixin(@color) when (lightness(@color) > 50%) {background: black;
}

三、功能深度对比

1. 函数与运算

Sass：
支持复杂数学运算和自定义函数：

@function em($px, $base: 16px) {@return ($px / $base) * 1em;
}
.title { font-size: em(24px); } // 1.5em

Less：
仅支持内置函数（如 lighten()、darken()），无法自定义函数。

2. 继承机制

Sass（高效继承）：
```
%button-base { padding: 10px; }
.primary-btn { @extend %button-base; }
```
编译后合并相同样式，减少 CSS 体积。
Less（通过混入模拟）：
```
.button-base() { padding: 10px; }
.primary-btn { .button-base(); }
```
编译后重复代码，体积较大。

3. 模块化支持

Sass（现代模块系统）：

// _variables.scss
$primary-color: #3498db;// main.scss
@use 'variables' as vars;
.header { color: vars.$primary-color; }

Less（传统导入）：

// variables.less
@primary-color: #3498db;// main.less
@import "variables";
.header { color: @primary-color; }

四、编译与性能

维度	Sass	Less
编译器	Dart Sass（官方推荐，速度快）	less.js（基于 JavaScript）
编译速度	快（Dart 引擎优化）	较慢（大型项目明显）
实时编译	需工具（如 `sass --watch`、构建工具）	浏览器端可实时编译
生产环境	必须预编译	可预编译或浏览器端运行

五、社区与生态

生态项	Sass	Less
主流框架	Bootstrap 5+、Vuetify、Material-UI 等优先支持	Bootstrap 3~4 主要支持
插件工具	Webpack、Gulp、Vite 深度集成	支持但更新较少
学习资源	文档完善，社区活跃	资源较少，更新滞后
NPM 下载量	每周约 2500 万次（2023）	每周约 700 万次（2023）

六、迁移策略

从 Less 迁移到 Sass：
1. 重命名文件为 .scss。
2. 替换语法（如 @ → $）。
3. 逐步替换 Less 特有功能（如 Guards → @if）。
4. 使用工具转换（如 less2sass）。

七、选型建议

选择 Sass 的场景

项目复杂，需要高级功能（条件、循环、自定义函数）。
团队协作，需模块化管理和样式复用。
长期维护，依赖活跃社区和工具链支持。
使用现代框架（如 React、Vue）和组件库（如 Bootstrap 5+）。

选择 Less 的场景

小型项目或快速原型开发，无需复杂逻辑。
遗留项目维护（如旧版 Bootstrap）。
需要浏览器端实时编译（如简单静态页面）。
Sass：功能全面、性能优越、生态完善，现代开发首选。
Less：简单易学、浏览器兼容性佳，适合轻量级场景。

根据项目需求和团队熟悉度选择，优先推荐 Sass 应对未来挑战。

Sass 内置函数

一、颜色函数

1. 颜色调整

函数	作用	示例
`lighten($color, $amount)`	增加颜色亮度（0%~100%）	`lighten(#336699, 20%)` → `#6699cc`
`darken($color, $amount)`	降低颜色亮度（0%~100%）	`darken(#336699, 10%)` → `#1a4d80`
`saturate($color, $amount)`	增加饱和度（0%~100%）	`saturate(#336699, 20%)` → `#2b5c8c`
`desaturate($color, $amount)`	降低饱和度	`desaturate(#ff0000, 50%)` → `#808080`
`opacify($color, $amount)`	增加不透明度（0~1）	`opacify(rgba(255,0,0,0.5), 0.2)` → `rgba(255,0,0,0.7)`
`transparentize($color, $amount)`	降低不透明度	`transparentize(#ff0000, 0.3)` → `rgba(255,0,0,0.7)`

2. 颜色混合

函数	作用	示例
`mix($color1, $color2, $weight)`	混合两种颜色（权重 0%~100%）	`mix(red, blue, 50%)` → `#800080`（紫色）
`grayscale($color)`	转为灰度颜色	`grayscale(#ff0000)` → `#808080`

3. 颜色通道提取

函数	作用	示例
`red($color)`	提取红色通道值（0~255）	`red(#ff3366)` → `255`
`green($color)`	提取绿色通道值	`green(#ff3366)` → `51`
`blue($color)`	提取蓝色通道值	`blue(#ff3366)` → `102`
`alpha($color)`	提取透明度（0~1）	`alpha(rgba(255,0,0,0.5))` → `0.5`

二、数值函数

函数	作用	示例
`percentage($number)`	转为百分比（`0.5` → `50%`）	`percentage(0.3)` → `30%`
`round($number)`	四舍五入取整	`round(3.7)` → `4`
`ceil($number)`	向上取整	`ceil(3.2)` → `4`
`floor($number)`	向下取整	`floor(3.7)` → `3`
`abs($number)`	取绝对值	`abs(-10)` → `10`
`min($numbers...)`	取最小值	`min(5, 3, 8)` → `3`
`max($numbers...)`	取最大值	`max(5, 3, 8)` → `8`
`random($limit?)`	生成随机数（0~1 或 0~$limit）	`random(100)` → `42`

三、字符串函数

函数	作用	示例
`quote($string)`	添加引号	`quote(text)` → `"text"`
`unquote($string)`	移除引号	`unquote("text")` → `text`
`to-upper-case($string)`	转为大写	`to-upper-case(abc)` → `ABC`
`to-lower-case($string)`	转为小写	`to-lower-case(ABC)` → `abc`
`str-length($string)`	获取字符串长度	`str-length("hello")` → `5`
`str-index($string, $substring)`	查找子串位置	`str-index("hello", "e")` → `2`

四、列表函数

函数	作用	示例
`length($list)`	获取列表长度	`length(1px 2px 3px)` → `3`
`nth($list, $n)`	获取第 `$n` 个元素	`nth(a b c, 2)` → `b`
`join($list1, $list2, $separator)`	合并列表	`join(a b, c d)` → `a b c d`
`append($list, $value, $separator)`	追加元素到列表	`append(a b, c)` → `a b c`
`index($list, $value)`	查找元素位置	`index(a b c, b)` → `2`

五、映射函数（Map）

函数	作用	示例
`map-get($map, $key)`	根据键获取值	`map-get((a:1, b:2), a)` → `1`
`map-merge($map1, $map2)`	合并两个映射	`map-merge((a:1), (b:2))` → `(a:1, b:2)`
`map-keys($map)`	获取所有键的列表	`map-keys((a:1, b:2))` → `a, b`
`map-values($map)`	获取所有值的列表	`map-values((a:1, b:2))` → `1, 2`

六、其他实用函数

函数	作用	示例
`if($condition, $if-true, $if-false)`	条件判断	`if(true, 10px, 20px)` → `10px`
`unique-id()`	生成唯一 ID（如 `u0daxx`）	`unique-id()` → `u0daxx`
`inspect($value)`	返回值的字符串表示形式	`inspect(10px)` → `10px`

七、实战示例

1. 动态生成颜色渐变

$base-color: #3498db;
$steps: 5;@for $i from 1 through $steps {.color-step-#{$i} {background: lighten($base-color, $i * 10%);}
}

2. 响应式断点管理

$breakpoints: (small: 480px,medium: 768px,large: 1024px
);@mixin respond-to($key) {$width: map-get($breakpoints, $key);@media (min-width: $width) {@content;}
}.container {@include respond-to(medium) {padding: 20px;}
}

八、总结

颜色处理：lighten、darken、mix 快速生成配色方案。
数值计算：percentage、round 简化布局计算。
字符串操作：to-upper-case、str-index 增强动态内容处理能力。
列表与映射：map-get、nth 管理复杂数据结构。
条件与循环：结合 @if、@for 实现动态样式生成。

CSS 预处理器 Sass

目录 Sass 一、Sass 是什么？ 二、核心功能详解 1. 变量（Variables） 2. 嵌套（Nesting） 3. 混合宏（Mixins） 4. 继承（Inheritance） 5. 运算（Operations&…...

编程日记 2025/7/17 5:42:17

Mybatisplus:一些常用功能

自动驼峰 mybatis-plus:configuration:# 开启驼峰命名规则，默认true开启map-underscore-to-camel-case: true# 控制台日志打印，便于查看SQLlog-impl: org.apache.ibatis.logging.stdout.StdOutImpl TableName 作用：表名注解，标识…...

编程日记 2025/6/29 5:14:12

Golang WaitGroup 用法源码阅读笔记

使用 sync.WaitGroup可以用来阻塞等待一组并发任务完成下面是如何使用sync.WaitGroup的使用最重要的就是不能并发调用Add()和Wait() var wg sync.WaitGroupfor ... {wg.Add(1) // 不能和wg.Wait()并发执行go func() {// 不能在启动的函数里面执行wg.Add(), 否则会panicde…...

编程日记 2025/7/16 19:45:01

第二章：一致性基础 A Primer on Memory Consistency and Cache Coherence - 2nd Edition

在本章中，我们将介绍足够多的缓存一致性知识，以便理解一致性模型是如何与缓存相互作用的。我们在 2.1 节首先给出在本入门教程中所考虑的系统模型。为了简化本章以及后续章节的阐述，我们选择了尽可能简单的系统模型，该模型足以说明…...

编程日记 2025/6/29 7:57:20

C++类_移动构造函数

std::move 的主要用途是在对象所有权转移时，触发移动构造函数或移动赋值运算符，避免不必要的深拷贝，提升性能。移动构造函数和移动赋值运算符， std::move转换为右值，匹配到移动构造函数和移动赋值运算符。…...

编程日记 2025/7/17 5:33:01

Spring AI 实战：第一章、Spring AI入门之DeepSeek调用

引言：当Spring遇上AI，会擦出怎样的火花？ 作为一名Java开发者，是否曾经眼红Python阵营那些花里胡哨的AI应用？是否在对接各种大模型API时，被五花八门的接口规范搞得头大？好消息是，Spr…...

编程日记 2025/6/29 7:14:55

fastapi+vue中的用户权限管理设计

数据库设计：RBAC数据模型这是一个典型的基于SQLAlchemy的RBAC权限系统数据模型实现，各模型分工明确，共同构成完整的权限管理系统。图解说明： 实体关系： 用户(USER)和角色(ROLE)通过 USER_ROLE 中间表实现多对多关系…...

编程日记 2025/7/9 17:15:30

Space Engineers 太空工程师 [DLC 解锁] [Steam] [Windows]

Space Engineers 太空工程师 [DLC 解锁] [Steam] [Windows] 需要有游戏正版基础本体，安装路径不能带有中文，或其它非常规拉丁字符； DLC 版本至最新全部 DLC 后续可能无法及时更新文章，具体最新版本见下载文件说明 DLC 解锁列表&…...

编程日记 2025/6/29 5:18:49

随机变量数字特征

主要介绍一维随机变量期望和方差、二维随机变量期望和方差、以及协方差相关公式，及推导。一维随机变量以一个抛硬币的场景作为例子，如下： 抛掷两枚均匀硬币，如果两枚都是正面向上，则赢得2元，否则就输掉…...

编程日记 2025/7/1 17:18:02

C++总结01-类型相关

一、数据存储 1.程序数据段 • 静态（全局）数据区：全局变量、静态变量 • 堆内存：程序员手动分配、手动释放 • 栈内存：编译器自动分配、自动释放 • 常量区：编译时大小、值确定不可修改 2.程序代码段 •…...

编程日记 2025/7/17 5:39:52

【多线程】七、POSIX信号量环形队列的生产者消费者模型

文章目录 Ⅰ. 信号量一、POSIX 信号量的概念二、POSIX 信号量的类型区别三、POSIX 信号量与 SystemV 信号量的区别Ⅱ. 线程信号量基本原理一、为什么要引入信号量❓二、PV 操作三、POSIX 信号量的实现原理四、CAS操作介绍Ⅲ. POSIX未命名信号量接口一、初始化无名信号量二、销毁…...

编程日记 2025/7/4 3:26:04

二维码批量识别—混乱多张二维码识别-物品分拣—-未来之窗-仙盟创梦IDE

仙盟模型用途精准分拣：快速准确识别物品上复杂或多个二维码，依据码中信息（如目的地、品类等）实现物品自动化分拣，提高分拣效率与准确性。库存管理：识别入库、出库物品二维码，更新库存数据&am…...

编程日记 2025/6/29 6:19:56

《TensorFlow 与 TensorFlow Lite：协同驱动 AI 应用全景》

《TensorFlow 与 TensorFlow Lite：协同驱动 AI 应用全景》摘要 ：在机器学习技术浪潮中，TensorFlow 与 TensorFlow Lite 作为 Google 技术栈的核心组件，分别占据云端训练与端侧部署的关键位置。本文将系统梳理二者架构特性、功能…...

编程日记 2025/7/7 18:14:52

Spring AI 实战：第三章、Spring AI结构化输出之告别杂乱无章

引言：当程序员遇上剧荒 “周末看什么？” 这个看似简单的问题，往往能让我们在各大影视平台间反复横跳半小时，最后无奈选择重刷《老友记》。本期让我们用技术解决这个"世纪难题"：让大模型成为你的私人影视推荐…...

编程日记 2025/7/6 21:08:20

ros2 humble 控制真实机械臂（以lerobot为例）

基础版 0.确保串口访问权限 sudo chmod 666 /dev/ttyARM0 # 确保串口访问权限 1.下载 lerobot 驱动功能包 git clone https://gitee.com/kong-yue1/lerobot_devices.git 2.编写控制节点（完整代码） 主要功能是与 Feetech 电机总线进行通信&#…...

编程日记 2025/6/29 5:44:36

REINFORCE蒙特卡罗策略梯度算法详解：python从零实现

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创…...

编程日记 2025/7/12 21:21:01

模拟SIP终端向Freeswitch注册用户

1、简介使用go语言编写一个程序，模拟SIP-T58终端在Freeswitch上注册用户 2、思路以客户端向服务端Freeswitch发起REGISTER请求，告知服务器当前的联系地址构造SIP REGISTER请求创建UDP连接，连接到Freeswitch的5060端口发送初始的REGISTER请…...

编程日记 2025/7/8 6:12:28

Elasticsearch 中的索引模板：如何使用可组合模板

作者：来自 Elastic Kofi Bartlett 探索可组合模板以及如何创建它们。更多阅读： Elasticsearch：可组合的 Index templates - 7.8 版本之后想获得 Elastic 认证吗？查看下一期 Elasticsearch Engineer 培训的时间！ El…...

编程日记 2025/6/29 8:07:48

一篇文章看懂时间同步服务

Linux 系统时间与时区管理一、时间与时钟类型时钟类型说明管理工具系统时钟由 Linux 内核维护的软件时钟，基于时区配置显示时间timedatectl硬件时钟 (RTC)主板上的物理时钟，通常以 UTC 或本地时间存储，用于系统启动时初始化时间hwclock …...

编程日记 2025/6/29 5:14:22

Mysql常用语句汇总

Mysql语句分类 DDL: 数据定义语言，用来定义数据库对象（数据库、表、字段）DML: 数据操作语言，用来对数据库表中的数据进行增删改DQL: 数据查询语言，用来查询数据库中表的记录DCL: 数据控制语言，用来创建数据…...

编程日记 2025/7/15 9:16:33

迭代器的思想和实现细节

1. 迭代器的本质迭代器是一种行为类似指针的对象，它可能是指针（如 std::vector 的迭代器），也可能是封装了指针的类（如 std::list 的迭代器）。如果是指针那天然就可以用下面的运算，如果是类&am…...

编程日记 2025/6/29 5:14:41

[Vue]编程式导航

在 Vue 中，编程式导航是通过 JavaScript 代码（而非 <router-link> 标签）动态控制路由跳转的核心方式。这个方法依赖于 Vue Router 提供的 API，能更灵活地处理复杂场景（如异步操作、条件跳转等）。一、…...

编程日记 2025/7/11 11:05:19

使用Node.js搭建https服务器

一、引言 https是是http的安全版本，在http的基础上通过传输加密和身份认证保证了传输过程中的安全性。可以认为：https http tls/ssl。本文讲述使用Node.js搭建https服务器的方法。二、编译OpenSSL 按照《Openssl在Linux下编译/交叉编译》&#xff0…...

编程日记 2025/7/8 6:23:57

网络安全：sql注入练习靶场——sqli_labs安装保姆级教程

网络安全：sql注入练习靶场——sqli_labs安装保姆级教程前言 sqli-labs靶场是一个开源的sql注入练习的综合靶场，包含大部分sql注入漏洞以及注入方式网络安全学习者可以通过在sqli-labs靶场练习提升对sql注入的理解，以及学习各种绕过姿势。…...

编程日记 2025/7/9 23:12:58

rfsoc petalinux适配调试记录

1。安装虚拟机 2.设置共享文件夹 https://xinzhi.wenda.so.com/a/1668239544201149先设置文件夹路径 vmware 12 下安装 ubuntu 16.04 后，按往常的惯例安装 vmware-tools，安装时提示建议使用 open-vm-tools，于是放弃 vmware-tools 的安装&am…...

编程日记 2025/6/29 5:28:12

Windows下编译WebRTC源码

一、开发环境要求准备一台64位的win10或win11（我用的是win11）电脑。最好是一台纯净的、没有安装过其它软件的Windows主机，避免已安装的软件和库对编译造成影响。然后最好预留超过100G的硬盘空间。因为编译WebRTC时会产生大量的临时文件需…...

编程日记 2025/7/8 6:20:57

【vscode】.dart文件没有错误波浪线

解决方法： 新建一个文件夹，在vscode里打开这个文件夹在这个文件夹里新建.dart文件后打开即可出现错误波浪线...

编程日记 2025/6/29 7:29:03

OpenharmonyOS+RK3568，【编译烧录】

文章目录 1. 摘要 ✨2. 代码下载 📩3. 编译 🖥️4. 修改&适配 ✂️4.1 编译框架基本概念4.2 vendor & device 目录4.3 内核编译4.3.1 如何修改、适配自己的开发板？ 4.4 修改外设驱动 5. 烧录&验证 📋参考 1. 摘要 ✨ …...

编程日记 2025/7/13 18:51:07

从零开始理解 C++ 后端编程中的分布式系统

一、什么是“分布式”？简单来说，分布式系统就是由“多个计算机（或服务器）”组成的一个大系统，它们通过网络协作完成某个任务，就像一个“团队合作”一样。想象你开了一家餐馆，最初只有一个厨房和一个服务员，所有订单都在这里处理。随着生意变好，你需要：开分店…...

编程日记 2025/7/5 13:13:53

基于SpringBoot的篮球竞赛预约平台设计与实现

1.1 研究背景科学技术日新月异的如今，计算机在生活各个领域都占有重要的作用，尤其在信息管理方面，在这样的大背景下，学习计算机知识不仅仅是为了掌握一种技能，更重要的是能够让它真正地使用到实践中去，以…...

编程日记 2025/6/29 5:17:31

具身系列——PPO算法实现CartPole游戏（强化学习）

完整代码参考： https://gitee.com/chencib/ailib/blob/master/rl/ppo_cartpole.py 执行结果： 部分训练得分： (sd) D:\Dev\traditional_nn\feiai\test\rl>python ppo_cartpole_v2_succeed.py Ep: 0 | Reward: 23.0 | Running: 2…...

编程日记 2025/6/29 5:17:29

小程序与快应用：中国移动互联网的渐进式革命——卓伊凡的技术演进观

小程序与快应用：中国移动互联网的渐进式革命——卓伊凡的技术演进观在知乎看到很多：“懂王”发布的要把内行笑疯了的评论，卓伊凡必须怼一下，真印证那句话，无知者无畏一、Web与小程序的技术本质差异 1.1 浏览器渲染…...

编程日记 2025/7/7 10:24:41

Socket 编程 UDP

Socket 编程 UDP UDP 网络编程V1 版本 - echo serverV2 版本 - DictServerV3 版本 - 简单聊天室补充参考内容地址转换函数关于 inet_ntoa UDP 网络编程声明：下面代码的验证都是用Windows作为客户端的，如果你有两台云服务器可以直接粘贴我在Linux下的客…...

编程日记 2025/6/29 7:27:12

目录基础 API 函数1. lua_len(L, index)2. lua_load(L, reader, data, chunkname, mode)3. lua_newstate(allocator, ud)4. lua_newtable(L)5. lua_newthread(L)6. lua_newuserdata(L, size)7. lua_next(L, index) 辅助库函数（luaL_*）8. luaL_len(L, in…...

编程日记 2025/7/14 16:28:41

YOLOv11改进：利用RT-DETR主干网络PPHGNetV2助力轻量化目标检测

这里写自定义目录标题 YOLOv11改进：利用RT-DETR主干网络PPHGNetV2助力轻量化目标检测1. 介绍2. 引言3. 技术背景3.1 YOLOv11概述3.2 RT-DETR与PPHGNetV23.3 相关工作 4. 应用使用场景5. 详细代码实现5.1 环境准备5.2 PPHGNetV2主干网络实现5.3 YOLOv11与PPHGNetV2集…...

编程日记 2025/7/10 8:25:45

centos7.0无法安装php8.2/8.3

在centos安装php8.2报错 configure: error: *** A compiler with support for C17 language features is required. 配置过程检测到你的系统编译器不支持 C17 语言特性，而 PHP 8.2 的编译需要编译器支持 C17 sudo yum update -y sudo yum install centos-releas…...

编程日记 2025/6/29 5:14:24

工业传动核心部件深度剖析：丝杆升降机与气缸的技术特性及选型指南

在工业自动化技术飞速发展的当下，丝杆升降机与气缸作为关键的直线传动部件，广泛应用于各类机械设备中。对于工程师而言，深入了解它们的技术特性、优缺点及适用场景，是实现高效、精准设备设计的重要前提。本文将从技术原理出发&…...

编程日记 2025/7/10 17:45:26

flask 获取各种请求数据：GET form-data x-www-form-urlencoded JSON headers 上传文件

在 Flask 里，能使用多种方法获取不同类型的请求数据，下面详细介绍常见请求数据的获取方式。获取查询字符串参数（GET 请求） 查询字符串参数一般在 URL 里，以 ?key1value1&key2value2 这种形式存在。可通过 requ…...

编程日记 2025/6/29 5:14:29

c++_2011 NOIP 普及组 (1)

P1307 [NOIP 2011 普及组] 数字反转 P1307 [NOIP 2011 普及组] 数字反转 - 洛谷 # P1307 [NOIP 2011 普及组] 数字反转 ## 题目描述给定一个整数 $N$，请将该数各个位上数字反转得到一个新数。新数也应满足整数的常见形式，即除非给定的原数为零&…...

编程日记 2025/6/29 5:14:33

信息泄露：网站敏感文件泄漏的隐形危机与防御之道

在网络安全领域，信息泄露常被称为“沉默的杀手”。攻击者无需复杂漏洞，仅通过网站无意暴露的敏感文件（如源码备份、配置文件、版本控制记录），即可获取数据库密码、API密钥甚至服务器权限。本文将深入剖析信息泄…...

编程日记 2025/7/9 8:33:48

C++笔记-多态(包含虚函数，纯虚函数和虚函数表等)

1.多态的概念多态(polymorphism)的概念:通俗来说，就是多种形态。多态分为编译时多态(静态多态)和运行时多态(动态多态)，这里我们重点讲运行时多态，编译时多态(静态多态)和运行时多态(动态多态)。编译时多态(静态多态)主要就是我们前面讲的函…...

编程日记 2025/6/29 5:16:47

2025年- H22-Lc130-206. 反转链表（链表）---java版

1.题目描述 2.思路使用迭代法 (1)定义一个前指针 (2)然后定义两个变量 curr（head），curr.next。 (3)curr和curr.next交换位置（只要当前指针不为空，执行两两交换） 3.代码实现 /*** Definition for singly-…...

编程日记 2025/6/29 5:16:19

智能家居的OneNet云平台

一、声明该项目只需要创建一个产品，然后这个产品里面包含几个设备，而不是直接创建几个产品注意：传输数据使用到了不同的power，还有一定要手机先联网才能使用云平台二、OneNet云平台创建 （1）Temperatur…...

编程日记 2025/6/29 7:47:50

二、shell脚本--变量与数据类型

1. 变量的定义与使用定义变量：简单直接在 Shell 里定义变量相当容易： 基本格式: variable_namevalue关键点 ❗：赋值号的两边绝对不能有空格！这绝对是初学者最容易踩的坑之一 😨，务必留意&#xff01…...

编程日记 2025/6/29 6:58:23

GitHub Actions 和 GitLab CI/CD 流水线设计

以下是关于 GitHub Actions 和 GitLab CI/CD 流水线设计的基本知识总结：一、核心概念对比维度GitHub ActionsGitLab CI/CD配置方式YAML 文件（.github/workflows/*.yml）.gitlab-ci.yml执行环境GitHub 托管 Runner / 自托管GitLab 共享 Runner / 自托管市场生态Actions Mar…...

编程日记 2025/6/29 6:07:26

穿越数据森林与网络迷宫：树与图上动态规划实战指南

在 C 算法的浩瀚宇宙中，树与图就像是神秘的迷宫和茂密的森林，充满了未知与挑战。而动态规划则是我们探索其中的神奇罗盘，帮助我们找到最优路径。今天，就让我们一起深入这片神秘领域，揭开树与图上动态规划的神秘面纱&am…...

编程日记 2025/7/8 12:43:05

Java学习手册：Spring 生态其他组件介绍

一、微服务架构相关组件 Spring Cloud 服务注册与发现 ： Eureka ：由 Netflix 开源，包含 Eureka Server 和 Eureka Client 两部分。Eureka Server 作为服务注册表，接收服务实例的注册请求并管理其信息；Eureka Client 负…...

编程日记 2025/6/29 6:42:05

[android]MT6835 Android 移植brctl指令

说明 android默认brctl不支持showmacs选项，需要移植brctl-utils软件包移除toybox中brctl编译 mssi/external/toybox/Android.bp 将 toybox_symlinks ["[","acpi","base64","basename","blockdev","br…...

编程日记 2025/7/14 4:28:25

安卓基础（悬浮窗分级菜单和弹窗）

initializeViews() 初始化把全部的按钮都弄出来 // 主菜单按钮ImageButton mainButton floatingMenuView.findViewById(R.id.main_button);// 二级菜单按钮subButtons new ImageButton[3];subButtons[0] floatingMenuView.findViewById(R.id.sub_button_1);subButtons[1]…...

编程日记 2025/6/29 5:14:26

HTTP基础介绍+OSI七层参考模型+HTTP协议介绍

图片来源于网络图片来源于网络浏览器 Chrome:谷歌浏览器，推荐 Safari（WebKit）：苹果浏览器，iOS，macOS Firefox：火狐浏览器，开源插件特别多（FireBug） IE:Wi…...

编程日记 2025/6/29 5:17:39

Sass

一、Sass 是什么？

二、核心功能详解

1. 变量（Variables）

2. 嵌套（Nesting）

3. 混合宏（Mixins）

4. 继承（Inheritance）

5. 运算（Operations）

6. 函数（Functions）

7. 条件与循环

8. 模块化（Modules）

三、Sass 工具链

1. 安装与编译

2. 集成构建工具

3. VS Code 插件

四、最佳实践

五、Sass 与 Less 对比

Sass 与 Less 核心对比

一、核心对比速览

二、语法细节对比

1. 变量定义

2. 嵌套语法

3. 混合宏（Mixins）

4. 条件控制

三、功能深度对比

1. 函数与运算

2. 继承机制

3. 模块化支持

四、编译与性能

五、社区与生态

六、迁移策略

七、选型建议

Sass 内置函数

一、颜色函数

1. 颜色调整

2. 颜色混合

3. 颜色通道提取

二、数值函数

三、字符串函数

四、列表函数

五、映射函数（Map）

六、其他实用函数

七、实战示例

八、总结

相关文章：