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

CSS进阶和SASS

news 2026/1/13 6:21:54

一、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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2026/1/7 19:00:11

自然语言处理——循环神经网络

自然语言处理——循环神经网络循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM&#xff09…...

编程新知 2026/1/5 15:22:21

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。一、智能合约修改为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...

编程新知 2025/12/31 21:30:40

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...

编程新知 2026/1/3 7:15:13

作为测试我们应该关注redis哪些方面

1、功能测试数据结构操作：验证字符串、列表、哈希、集合和有序的基本操作是否正确持久化：测试aof和aof持久化机制，确保数据在开启后正确恢复。事务：检查事务的原子性和回滚机制。发布订阅：确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2026/1/9 20:35:26

一、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)