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

CSS进阶和SASS

news 2026/4/12 23:12:05

一、CSS进阶

1.1、CSS变量

1.2、CSS属性值的计算过程

1.3、做杯咖啡

1.4、下划线动画

1.5、CSS中的混合模式(Blending)

二、SASS

2.1、Sass的颜色函数

2.2、Sass的扩展(@extend)和占位符(%)、混合(Mixin)

2.3、Sass的数学函数

2.4、Sass的模块化开发

2.5、Sass实现主题切换

2.6、Sass实现文字替换

2.7、Sass实现星空效果

2.8、Sass简化媒体查询

2.9、自动注入Less全局变量

2.10、比较Sass和Less

一、CSS进阶

1.1、CSS变量

基础应用：父子元素的css属性存在一定的关系

  <body><div class="container"><div class="item"></div></div></body>

    <style>/* :root相当于html元素 */:root {--size: 250px;}.container {--gap: calc(var(--size) / 10);width: var(--size);height: var(--size);background-color: red;padding: var(--gap); /* 25px */margin: var(--gap);}.item {width: calc(var(--size) / 2); /* 125px */height: calc(var(--size) / 2);background-color: yellow;}</style>

小球从左到右滚动：

    <style>.container {width: 40%;height:200px;border: 3px solid black;position: relative;margin: 0 auto;}.item {width: 100px;height: 100px;border-radius: 50%;background-color: red;left: 0;top: 30px;position: absolute;animation: move 4s linear infinite;}@keyframes move {50% {transform: translateX(calc(var(--w) - 100%));}}</style><body><script>const container = document.querySelector(".container");// 相当于 <div class="container" style="--w: 758px;">const w = container.clientWidth;container.style.setProperty("--w", w + "px");</script></body>

1.2、CSS属性值的计算过程

先确定声明值—层叠(权重)—继承—使用默认值—最后显示到页面

1.3、做杯咖啡

杯身path图形： SvgPathEditor

    <style>body {background-color: #cebca6;}.cup {width: 160px;height: 162px;margin: 300px auto;position: relative;}/* 杯口 */.cup::after {content: "";position: absolute;width: 100%;height: 20px;background-color: rgba(247, 247, 247, 0.5);left: 0;top: -10px;border-radius: 50%;}/* 杯身 */.cup-body {height: 100%;background-color: rgba(247, 247, 247, 0.9);clip-path: path("m 0 0 q 4.59 145.8 34.425 155.52 c 29.835 8.1 68.85 8.1 96.39 0 q 29.835 -9.72 29.835 -155.52 C 143 11 16 13 0 0 Z");display: flex;flex-direction: column-reverse;}.layer {text-align: center;height: 50px;border-radius: 80px/10px;position: relative;}/* 每一层的水面 */.layer::after {content: "";position: absolute;width: 100%;height: 20px;background: inherit;top: 0;left: 0;border-radius: 50%;}.layer:nth-child(n + 2) {margin-bottom: -20px;}.espresso {background-color: rgba(75, 49, 31, 0.8);}.whiskey {background-color: rgba(207, 129, 39, 0.8);}</style><body><div class="cup"><div class="cup-body"><div class="layer espresso">espresso</div><div class="layer whiskey">whiskey</div></div></div></body>

1.4、下划线动画

    <style>.title span {line-height: 2;background: linear-gradient(to right, #ff5f57, #28c840) no-repeat rightbottom;background-size: 0px 2px;transition:background-size 1s;}.title span:hover {background-position: left bottom;background-size: 100% 2px;}</style><body><div class="title" style="width: 400px;"><span>Lorem is Value Lorem is Value Lorem is Value Lorem is Value Lorem isValue Lorem is Value Lorem is Value Lorem is Value Lorem is Value Loremis Value Lorem is Value</span></div></body>

1.5、CSS中的混合模式(Blending)

    <style>.earth {width: 740px;height: 486px;background: url(./green.png) blue;/* 图像背景色和元素背景色混合 :此时green.png是蓝色的*/background-blend-mode: lighten;position: relative;}.mix {width: 540px;height: 270px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);background: url(./dance.gif);/* 使用 mix-blend-mode 生成对比效果 */mix-blend-mode: multiply;filter: contrast(3);}</style><body><div class="earth"><div class="mix"></div></div></body>

二、SASS

Sass英文官网地址：Sass: Syntactically Awesome Style Sheets

Sass中文官网地址：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
Less英文官网地址：Getting started | Less.js
Less中文官网地址：Less 快速入门 | Less.js 中文文档 - Less 中文网

2.1、Sass的颜色函数

  <body><button class="btn type-1">按钮</button><button class="btn type-2">按钮</button><button class="btn type-3">按钮</button><button class="btn type-4" disabled>按钮</button><button class="btn type-5">按钮</button></body>

$btnColors: #409eff, #67c23a, #8b590f, #f54343, #6c6d71;
@for $i from 1 through length($btnColors) {.btn.type-#{$i} {// 获取 $btnColors 列表中第 i 个颜色值$color: nth($btnColors, $i);background-color: $color;color: #fff;&:hover {background-color: lighten($color, 10%);}&:active {background-color: darken($color, 10%);}&:disabled {background-color: lighten($color, 20%);color: white;}}
}

2.2、Sass的扩展(`@extend`)和占位符(`%`)、混合(Mixin)

使用场景：一个选择器要继承另一个选择器的所有样式，需要复用样式，一般和占位符【不会直接编译成 CSS 中的选择器】一起使用。

使用场景：

(1)、基本语法：使用 @mixin 定义样式，然后通过 @include 来调用这个混合；

(2)、接收参数，并为参数设置默认值：在调用时可以部分传递 / 全部传递；

(3)、包含内容(@content)：传递块级内容；

混合与继承（@extend）的区别

@extend 用于让一个选择器继承另一个选择器的样式。
会合并多个选择器、可能导致选择器组合过多，生成复杂的 CSS。

@mixin 用于定义一组样式，并允许在多个地方重复使用这些样式。
可以带有参数，灵活性高。每次调用混合时，都会生成独立的样式规则。

2.3、Sass的数学函数

@use "sass:math";
.board {position: relative;width: 200px;height: 200px;border: 40px solid #3498db;border-radius: 50%;margin: 50px auto;display: flex;justify-content: center;align-items: center;
}.menu-item {position: absolute;width: 40px;height: 40px;background-color: #2ecc71;border-radius: 50%;text-align: center;line-height: 40px;color: white;font-size: 20px;opacity: 0;transition: .2s;
}
$r: 120px;
$n: 6;
$step: 360deg / $n;
@for $i from 1 through $n {.board:hover .menu-item:nth-child(#{$i}) {$deg: $step * ($i - 1);$x: $r * math.sin($deg);$y: -$r * math.cos($deg);transform: translate($x, $y);opacity: 1;}
}

2.4、Sass的模块化开发

@import './conmon.scss';
@import './conmon2.scss';
// 引入多个模块，出现同名变量，以下面的为准，出现命名污染
@debug conmon.$color;//输出 yellow

@use './conmon.scss';
@use './conmon2.scss';
@debug conmon.$color;//输出 green
@debug conmon2.$color;//输出 yellow
// =====加上命名空间=====
@use './conmon.scss' as a;
@use './conmon2.scss' as b;
@debug a.$color;//输出 green
@debug b.$color;//输出 yellow

对比@use与@import

特性	`@import`	`@use`
作用域	导入的内容暴露到全局作用域	导入的内容会被限定在命名空间内，避免全局污染
重复导入	多次导入同一文件会重复执行	同一文件只会被加载一次
变量和混合宏	直接暴露到全局，同名变量污染	变量、函数、混合宏通过命名空间as访问
性能	导入的文件每次都会重新解析	只会加载一次，减少冗余解析

2.5、Sass实现主题切换

$themes: (light: (bgColor: #fff,textColor: #000,),dark: (bgColor: #000,textColor: #fff,),
);
$curTheme: "light";
@mixin useTheme() {@each $themeName, $themeMap in $themes {html[data-theme="#{$themeName}"] & {@content($themeMap);}}
}
@function getVar($themeMap, $paramName) {@return map-get($themeMap, $paramName);
}
.item {width: 100px;height: 100px;@include useTheme() using ($themeMap) {background: getVar($themeMap, 'bgColor');color: getVar($themeMap, 'textColor');border-color: getVar($themeMap, 'textColor');};
}

2.6、Sass实现文字替换

场景：文字内容根据页面大小进行响应式变化

2.7、Sass实现星空效果

效果：漫天星辰近大远小、每一层以不同流速向上划过

body {background-color: black;
}
@function getShadows($n) {$shadows: "";@for $i from 1 through $n {//为每个阴影生成随机的 vw 和 vh 值，确保字符串拼接正确$shadow: "#{random(100)}vw #{random(100)}vh #fff";//如果是第一次添加阴影，不需要逗号@if $i == 1 {$shadows: $shadow;} @else {$shadows: #{$shadows}, #{$shadow};}}@return $shadows;
}
$duration: 500s;
$count: 1000;
@for $i from 1 through 5 {$duration: $duration/2;$count:floor($count/2);.layer#{$i} {$size: #{$i}px;position: fixed;width: $size;height: $size;border-radius: 50%;left: 0;top: 0;background-color: red;box-shadow: getShadows($count);animation: moveUp $duration linear infinite;&::after {content: "";position: fixed;left: 0;top: 100vh;border-radius: inherit;width: inherit;height: inherit;box-shadow: inherit;}}
}
@keyframes moveUp {to {transform: translateY(-100vh);}
}

2.8、Sass简化媒体查询

$breakpoints: ("phone": (320px, 480px,),"pad": (481px,768px,),"notebook": (769px,1024px,),"desktop": (1024px,1200px,),"tv": 1201px,
); //映射，可以避免多if分支
@mixin responseTo($breakname) {$bp: map-get($breakpoints, $breakname);@if type-of($bp)=="list" {@media (min-width: nth($bp, 1)) and (max-width: nth($bp, 2)) {@content;}}@else {@media (min-width: $bp) {@content;}}
}
.header {width: 100%;background-color: yellow;@include responseTo("phone") {height: 50px;}@include responseTo("pad") {height: 60px;}@include responseTo("notebook") {height: 70px;}@include responseTo("desktop") {height: 80px;}@include responseTo("tv") {height: 90px;}
}

2.9、自动注入Less全局变量

每个单页面都要使用.less里的变量或者公共部分，下面这样每次都要引入

<style lang="less" scoped>
@import "./var.less";
.less-div{color: @color;
}
</style>

简便写法就是直接在vue.config.js里直接引入

module.exports = {  
css: {loaderOptions: {less:{additionalData:`@import "~@/var.less"`// 或者additionalData:`@import "../../views/some-folder/var.less";`},}}
}

vue3的vue.config.js：

export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {less: {additionalData: `@import "@/assets/styles/variables.less";@import "@/assets/styles/mixins.less";`}}}
});

2.10、比较Sass和Less

特性	Sass	Less
语法	Sass（缩进式）和 SCSS（与 CSS 类似）	类似 CSS 的语法，完全基于 CSS
变量	使用 `$` 符号定义变量	使用 `@` 符号定义变量
混合	支持混合，可以接收参数	支持混合，支持动态参数
嵌套规则	支持嵌套规则，嵌套可以嵌套任意层级	支持嵌套规则，最多支持 4 层嵌套
继承	使用 `@extend` 来继承样式	使用 `&` 来模拟继承样式或组合选择器
运算	支持运算（如加减乘除、比较等）	支持运算（如加减乘除、比较等）
功能丰富	功能丰富，适用于大项目，支持Sass模块化、函数等	功能简单，但对于中小型项目非常合适
生态与工具	社区和文档支持丰富	较少，但也有一定的使用者和工具支持

CSS进阶和SASS

目录一、CSS进阶 1.1、CSS变量 1.2、CSS属性值的计算过程 1.3、做杯咖啡 1.4、下划线动画 1.5、CSS中的混合模式(Blending) 二、SASS 2.1、Sass的颜色函数 2.2、Sass的扩展(extend)和占位符(%)、混合(Mixin) 2.3、Sass的数学函数 2.4、Sass的模块化开发 2.5、Sass…...

编程日记 2025/1/8 4:39:21

SwiftUI 撸码常见错误 2 例漫谈

概述在 SwiftUI 日常撸码过程中，头发尚且还算茂盛的小码农们经常会犯这样那样的错误。虽然犯这些错的原因都很简单，但有时想要快速准确的定位它们却并不容易。况且这些错误还可能在模拟器和 Xcode 预览（Preview）表现的行为不甚…...

编程日记 2025/1/8 4:36:16

JavaScript系列（9）-- Set数据结构专题

JavaScript Set数据结构专题 🎲 在前八篇文章中，我们探讨了JavaScript的语言特性、ECMAScript标准、引擎工作原理、数值类型、字符串处理、Symbol类型、Object高级特性和Array高级操作。今天，让我们深入了解JavaScript中的Set数据结构。Set是…...

编程日记 2025/1/8 4:33:14

开发培训-慧集通（iPaaS）集成平台脚本开发Groovy基础培训视频

‌Groovy‌是一种基于Java虚拟机（JVM）的敏捷开发语言，结合了Python、Ruby和Smalltalk的许多强大特性。它旨在提高开发者的生产力，通过简洁、熟悉且易于学习的语法，Groovy能够与Java代码无缝集成，并提供强大…...

编程日记 2025/1/8 4:30:09

【软考网工笔记】计算机基础理论与安全——网络规划与设计

HFC 混合光纤同轴电缆网 HFC: Hybrid Fiber - Coaxial 的缩写，即混合光纤同轴电缆网。是一种经济实用的综合数字服务宽带网接入技术。 HFC 通常由光纤干线、同轴电缆支线和用户配线网络三部分组成，从有线电视台出来的节目信号先变成光信号在干线上传输…...

编程日记 2025/1/8 4:27:07

【设计模式】基本原则、设计模式分类

设计模式设计模式是软件工程中的一种通用术语，指的是针对特定问题的经过实践验证的解决方案。设计模式并不是最终的代码实现，而是描述了如何解决某一类问题的思路和方法。如果熟悉了设计模式，当遇到类似的场景，我们可以快速地…...

编程日记 2025/1/8 4:24:04

mac m2 安装 docker

文章目录安装1.下载安装包2.在downloads中打开3.在启动台打开打开终端验证修改国内镜像地址小结安装 1.下载安装包到官网下载适配的安装包：https://www.docker.com/products/docker-desktop/ 2.在downloads中打开拖过去 3.在启动台打开选择推荐设置 …...

编程日记 2025/1/8 4:23:00

Vue3-pinia的具体使用和刷新页面状态保持解决方案

在 Vue 3 中，Pinia 是一个官方推荐的状态管理库，它替代了 Vuex（Vuex在Vue3中依然可以正常使用），提供了更加简洁和现代的 API，同时能够与 Vue 3完美配合。在本回答中，我们将详细介绍 Pinia 的使用…...

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

用ResNet50+Qwen2-VL-2B-Instruct+LoRA模仿Diffusion-VLA的论文思路，在3090显卡上训练和测试成功

想一步步的实现Diffusion VLA论文的思路，不过论文的图像的输入用DINOv2进行特征提取的，我先把这个部分换成ResNet50。老铁们，直接上代码： from PIL import Image import torch import torchvision.models as models from torch…...

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

创建.net core 8.0项目时，有个启用原生AOT发布是什么意思

启用原生 AOT 发布（Native AOT publishing） 是指在 .NET 6 及更高版本中使用 Ahead-of-Time (AOT) 编译技术，将应用程序提前编译为本地机器代码，从而生成更高效、更快速启动的可执行文件。 1. AOT 编译是什么？ AOT …...

编程日记 2025/1/8 4:15:53

2.1.7-1 io_uring的使用

一、背景 （1）下面几个有关异步操作的例子： a）客户端和服务端的异步关系，就是客户端发送请求后不需要等待结果，接下来发送其他请求。 b）对于服务端，客户端来请求后，服务…...

编程日记 2025/1/8 4:12:48

群论学习笔记

什么是对称？ 对称是一个保持对象结构不变的变换，对称是一个过程，而不是一个具体的事物，伽罗瓦的对称是对方程根的置换，而一个置换就是对一系列事物的重排方式，严格的说，它也并不是这个重排本身…...

编程日记 2025/1/8 4:09:45

深入解析-正则表达式

学习正则，我们到底要学什么？ 正则表达式（RegEx）是一种强大的文本匹配工具，广泛应用于数据验证、文本搜索、替换和解析等领域。学习正则表达式，我们不仅要掌握其语法规则，还需要学会如何高效地利…...

编程日记 2025/1/8 4:05:40

yolov5核查数据标注漏报和误报

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、误报二、漏报三、源码总结前言本文主要用于记录数据标注和模型预测之间的漏报和误报思想及其源码提示：以下是本篇文章正文内容，…...

编程日记 2025/1/8 4:04:39

日志聚类算法 Drain 的实践与改良

在现实场景中，业务程序输出的日志往往规模庞大并且类型纷繁复杂。我们在查询和查看这些日志时，平铺的日志列表会让我们目不暇接，难以快速聚焦找到重要的日志条目。在观测云中，我们在日志页面提供了聚类分析功能，可以…...

编程日记 2025/1/8 3:55:31

如何让用户在网页中填写PDF表格？

在网页中让用户直接填写PDF表格，可以大大简化填写、打印、扫描和提交表单的流程。通过使用复选框、按钮和列表等交互元素，PDF表格不仅让填写过程更高效，还能方便地在电脑或移动设备上访问和提交数据。以下是在浏览器中显示可填写PDF表单的四…...

编程日记 2025/1/8 3:54:28

GXUOJ-算法-补题：22级《算法设计与分析》第一次课堂练习

2.最大子数组和问题描述代码解答 #include<bits/stdc.h> using namespace std; const int N1005; int sum,n,a[N]; int res-1;int result(){for(int i0;i<n;i){if(sum<0) suma[i];else{suma[i];resmax(res,sum);}}return res; } int main(){cin>>n;for(i…...

编程日记 2025/1/8 3:50:23

源代码编译安装X11及相关库、vim，配置vim（3）

一、vim插件安装首先安装插件管理器Vundle ()。参照官网流程即可。vim的插件管理器有多个，只用Vundle就够了。然后~/.vimrc里写上要安装的插件: filetype offset rtp~/.vim/bundle/Vundle.vim call vundle#begin() Plugin VundleVim/Vundle.vim Plugin powerline…...

编程日记 2025/1/8 3:48:21

uniapp 微信小程序自定义日历组件

效果图功能：可以记录当天是否有某些任务或者某些记录具体使用： 子组件代码 <template><view class"Accumulate"><view class"bx"><view class"bxx"><view class"plank"><…...

编程日记 2025/1/8 3:45:18

EdgeX规则引擎eKuiper

EdgeX 规则引擎eKuiper 一、架构设计 LF Edge eKuiper 是物联网数据分析和流式计算引擎。它是一个通用的边缘计算服务或中间件，为资源有限的边缘网关或设备而设计。 eKuiper 采用 Go 语言编写，其架构如下图所示: eKuiper 是 Golang 实现的轻量级物联网边缘分析、流式处理开源…...

编程日记 2025/1/8 3:44:17

记一次综合型流量分析 | 添柴不加火滦

核心摘要：这篇文章能帮你 ?? 1. 彻底搞懂条件分支与循环的适用场景，告别选择困难。 ?? 2. 掌握遍历DOM集合修改属性的标准姿势与性能窍门。 ?? 3. 识别流程控制中的常见“坑”，并学会如何优雅地绕过去。 ?? 主要内容脉络 ?? 一、痛…...

编程新知 2026/4/12 22:06:55

别再只用Entity了！Cesium性能优化实战：用Primitive实例化渲染1000个建筑模型

突破Cesium性能瓶颈：用Primitive实例化渲染千级建筑模型的实战指南当数字孪生城市项目需要展示数千栋建筑时，Entity API的便捷性反而成为性能杀手——帧率骤降、交互卡顿成为常态。这并非Cesium引擎的极限，而是我们尚未掌握其底层渲染能力的…...

编程新知 2026/4/12 21:51:31

Ubuntu 20.04下VirtualBox USB设备识别全攻略：从增强包安装到用户组配置

Ubuntu 20.04与VirtualBox USB设备深度集成指南在开发环境搭建过程中，我们经常需要在虚拟机中访问物理机的USB设备。Ubuntu 20.04 LTS作为长期支持版本，与VirtualBox的组合是许多开发者的首选方案。然而，当插入USB设备时，虚拟机却…...

编程新知 2026/4/12 21:36:06

SQL如何优化频繁的数据分页操作_ROW_NUMBER索引技巧

OFFSET FETCH 越翻越慢是因为OFFSET必须顺序扫描并跳过前N行，无法直接定位，导致大数据量时性能骤降；仅适用于前端下拉加载前几页或极小分页场景。为什么 OFFSET FETCH 越翻越慢？因为 OFFSET 会强制数据库跳过前面所有行&#xff0…...

编程新知 2026/4/12 20:40:43

3步轻松解密网易云NCM加密音乐：ncmdump工具全攻略

3步轻松解密网易云NCM加密音乐：ncmdump工具全攻略【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否遇到过这样的困扰：从网易云音乐下载的歌曲只能在特定客户端播放，无法在车载音响、手机自带…...

编程新知 2026/4/12 20:10:29

像素时装锻造坊实战：VMware环境配置与Anything-v5模型快速上手指南

像素时装锻造坊实战：VMware环境配置与Anything-v5模型快速上手指南 1. 为什么选择VMware部署像素时装锻造坊当你第一次看到像素时装锻造坊的界面时，可能会被它独特的日系RPG风格吸引。这款基于Stable Diffusion和Anything-v5模型的图像生成工具&#…...

编程新知 2026/4/12 19:38:09

Sollumz：3步在Blender中制作GTA V游戏模组的完整指南

Sollumz：3步在Blender中制作GTA V游戏模组的完整指南【免费下载链接】Sollumz Grand Theft Auto V modding suite for Blender. This add-on allows the creation of modded game assets: 3D models, maps, interiors, animations, etc. 项目地址: https://gitco…...

编程新知 2026/4/12 19:21:40

为什么92%的大模型项目卡在集群规模化阶段？3个被低估的工程瓶颈与可立即部署的轻量级编排方案

第一章：大模型工程化多集群管理方案 2026奇点智能技术大会(https://ml-summit.org) 大模型训练与推理的规模化落地，正驱动企业从单集群架构向跨地域、多异构环境的联邦式集群体系演进。单一Kubernetes集群已难以承载模型版本灰度发布、数据合规隔离、算…...

编程新知 2026/4/12 18:57:18

手把手教你写Python节点：将ROS的Twist消息转换为阿克曼模型的Gazebo控制指令

从零实现ROS阿克曼转向控制：Python节点开发与Gazebo仿真实战在机器人仿真开发中，阿克曼转向模型是轮式移动平台最常见的运动学结构之一。不同于简单的差速驱动，阿克曼转向更接近真实汽车的转向方式，需要考虑内外轮转速差和转向角…...

编程新知 2026/4/12 17:51:54

《QGIS快速入门与应用基础》274：POI点CSV数据加载（经纬度字段设置）

作者：翰墨之道，毕业于国际知名大学空间信息与计算机专业，获硕士学位，现任国内时空智能领域资深专家、CSDN知名技术博主。多年来深耕地理信息与时空智能核心技术研发，精通 QGIS、GrassGIS、OSG、OsgEarth、UE、Cesium、OpenLayers、Leaflet、MapBox 等主流工具与框架，兼具…...

编程新知 2026/4/12 17:35:35

一、CSS进阶

1.1、CSS变量

1.2、CSS属性值的计算过程

1.3、做杯咖啡

1.4、下划线动画

1.5、CSS中的混合模式(Blending)

二、SASS

2.1、Sass的颜色函数

2.2、Sass的扩展(@extend)和占位符(%)、混合(Mixin)

2.3、Sass的数学函数

2.4、Sass的模块化开发

2.5、Sass实现主题切换

2.6、Sass实现文字替换

2.7、Sass实现星空效果

2.8、Sass简化媒体查询

2.9、自动注入Less全局变量

2.10、比较Sass和Less

相关文章：

2.2、Sass的扩展(`@extend`)和占位符(`%`)、混合(Mixin)