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

CSS进阶和SASS

news 2025/6/7 0:13:29

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

AI编程规范失控？三大策略用Cursor Rules精准约束

在 AI 编程时代，如何让助手精准理解您的项目规范？当团队协作时，如何确保每位开发者生成的代码风格统一？Cursor Rules 正是您需要的终极解决方案——它如同一位永不疲倦的架构师，通过预设规则控制 AI 的每一次代码生成、重构与补全行为。本教程将带您深入 Cursor Rules…...

编程新知 2025/6/6 23:16:09

深度学习和神经网络卷积神经网络CNN

1.什么是卷积神经网络一种前馈神经网络；受生物学感受野的机制提出专门处理网格结构数据的深度学习模型核心特点：通过卷积操作自动提取空间局部特征（如纹理、边缘），显著降低参数量 2.CNN的三个结构特征局部连接&a…...

编程新知 2025/6/6 20:55:24

使用 Docker Compose 安装 PostgreSQL 16

前面是指南，后面是实际工作日志。 1. 创建 docker-compose.yml 文件 yaml 复制下载 version: 3.9 services:postgres:image: postgres:16container_name: postgres-16environment:POSTGRES_USER: your_username # 替换为你的用户名POSTGRES_PASSWORD: your…...

编程新知 2025/6/6 20:27:20

【C语言预处理详解(下)】--#和##运算符，命名约定，命令行定义，#undef，条件编译，头文件的包含，嵌套文件包含，其他预处理指令

目录五.#和##运算符 5.1--#运算符 5.2--##运算符六.命名约定，#undef，命令行定义 6.1--命名约定 6.2--#undef 6.3--命名行定义七.条件编译常见的条件编译指令： 1.普通的条件编译： 2.多个分支的条件编译(可以利用条…...

编程新知 2025/6/6 20:12:28

【自动思考记忆系统】demo （Java版）

背景：看了《人工智能》中的一段文章，于是有了想法。想从另一种观点（⭕️）出发，尝试编码，告别传统程序员一段代码解决一个问题的方式。下图是文章原文和我的思考涂鸦✍️，于是想写一个自动思考记…...

编程新知 2025/6/6 19:22:59

Prj10--8088单板机C语言8259中断测试（2）

1.测试结果 2.全部代码 #include "tiny_stdarg.h" // 使用自定义可变参数实现#define ADR_273 0x0200 #define ADR_244 0x0400 #define LED_PORT 0x800 #define PC16550_THR 0x1f0 #define PC16550_LSR 0x1f5 / //基本的IO操作函数 / char str[]"Hel…...

编程新知 2025/6/6 16:11:43

洛谷题目：P2761 软件补丁问题（本题简单）

个人介绍：题目传送门： P2761 软件补丁问题 - 洛谷 (luogu.com.cn) 前言：这道题是一个典型的状态搜索问题，核心目标就是利用给定d额多个补丁程序，将包含若干错误的软件修复成没有错误的状态，并且要使得修复过程当中的总耗时最少。下面是小亦为大家阐述滴思路： 1、状态…...

编程新知 2025/6/6 15:49:31

Day45 Python打卡训练营

知识点回顾： 1. tensorboard的发展历史和原理 2. tensorboard的常见操作 3. tensorboard在cifar上的实战：MLP和CNN模型一、tensorboard的基本操作 1.1 发展历史 TensorBoard 是 TensorFlow 生态中的官方可视化工具（也可无缝集成 PyTorch&…...

编程新知 2025/6/6 14:19:16

EXCEL如何快速批量给两字姓名中间加空格

EXCEL如何快速批量给姓名中间加空格优点：不会导致排版混乱缺点：无法输出在原有单元格上，若需要保留原始数据，可将公式结果复制后“选择性粘贴为值” 使用场景：在EXCEL中想要快速批量给两字姓名中间加入空格使姓名对…...

编程新知 2025/6/6 12:58:04

HarmonyOS5 仓颉入门：和 ArkTs 互操作

现在一般的场景是在已有 ArkTs 库中使用仓颉，所以可以将仓颉代码封装为 ArkTs 库，提供给外部使用。原理就是互操作宏解析被注解修饰的仓颉代码，会自动生成 ArkTs 声明文件和互操作层代码。使用步骤： 1.在 cj 文件中&#xff…...

编程新知 2025/6/6 12:12: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)