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

CSS进阶和SASS

news 2025/11/15 17:19:06

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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。目录【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化：人工智能的自我改进与监管挑战文章目录递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/9/29 3:23:47

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/11/7 21:07:40

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/8/18 9:54:31

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库，获取股票数据，并生成TabPFN这个模型可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...

编程新知 2025/9/20 4:34:47

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/11/11 21:44:02

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/10/7 4:57:55

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...

编程新知 2025/11/5 4:59:05

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/11/8 10:30:24

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