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实现主题切换

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/65896.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 Spring Boot 和 GraalVM 的原生镜像

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;历代文学&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编程&#xff0c;高并发设计&#xf…

清华大学Python包镜像站点

清华大学提供了一个Python包镜像站点&#xff0c;其中包括了许多常用的Python包。使用这个镜像站点可以提高下载Python包时的速度&#xff0c;因为包已经存储在国内的服务器上&#xff0c;从而减少了网络延迟。 要使用清华的pip镜像&#xff0c;你可以在pip命令中指定-i参数来…

【每日学点鸿蒙知识】tensorflowlite编译、音频编码线程、沉浸式状态栏、TextArea最大字节数限制等

1、如何编译Tensorflow lite库&#xff1f; 之前项目基于tflite推理引擎做人脸识别的功能&#xff0c;鸿蒙侧如何复用tflite模型&#xff1f; tflite对Android和iOS本身支配了GPU支持&#xff0c;但是鸿蒙侧目前并没有&#xff0c;鸿蒙提供了自己的推理引擎&#xff0c;而且支…

MySQL 索引优化实战 – 结合 Explain 深度解析慢查询

在实际的开发过程中&#xff0c;随着数据量的不断增大&#xff0c;慢查询成为了不可忽视的性能瓶颈。MySQL 提供了多种工具来帮助我们分析查询性能问题&#xff0c;其中最常用的工具是 EXPLAIN、SHOW PROFILE 和 SHOW STATUS。本文将从慢查询日志入手&#xff0c;结合 EXPLAIN …

【人工智能机器学习基础篇】——深入详解强化学习之常用算法Q-Learning与策略梯度,掌握智能体与环境的交互机制

深入详解强化学习之常用算法&#xff1a;Q-Learning与策略梯度 强化学习&#xff08;Reinforcement Learning, RL&#xff09;作为机器学习的一个重要分支&#xff0c;近年来在多个领域取得了显著成果。从棋类游戏的人机对战到自主驾驶汽车&#xff0c;强化学习技术展示了其强大…

计算机网络-L2TP VPN基础实验配置

一、概述 上次大概了解了L2TP的基本原理和使用场景&#xff0c;今天来模拟一个小实验&#xff0c;使用Ensp的网卡桥接到本地电脑试下L2TP拨号&#xff0c;今天主要使用标准的L2TP&#xff0c;其实在这个基础上可以加上IPSec进行加密&#xff0c;提高安全性。 拓扑说明&#xf…

Linux | 零基础Ubuntu解压RaR等压缩包文件

目录 介绍 案例分析 安装工具 解压实践 介绍 RAR是一种专利文件格式&#xff0c;用于数据压缩与归档打包&#xff0c;开发者为尤金罗谢尔&#xff08;俄语&#xff1a;Евгений Лазаревич Рошал&#xff0c;拉丁转写&#xff1a;Yevgeny Lazarevich R…

Postman接口测试05|实战项目笔记

目录 一、项目接口概况 二、单接口测试-登录接口&#xff1a;POST 1、正例 2、反例 ①姓名未注册 ②密码错误 ③姓名为空 ④多参 ⑤少参 ⑥无参 三、批量运行测试用例 四、生成测试报告 1、Postman界面生成 2、Newman命令行生成 五、token鉴权&#xff08;“…

PyTorch快速入门教程【小土堆】之完整模型训练套路

视频地址完整的模型训练套路&#xff08;一&#xff09;_哔哩哔哩_bilibili import torch import torchvision from model import * from torch import nn from torch.utils.data import DataLoader# 准备数据集 train_data torchvision.datasets.CIFAR10(root"CIFAR10&…

网络分析工具-tcpdump

文章目录 前言一、tcpdump基础官网链接命令选项详解常规过滤规则tcpdump输出 一、tcpdump实践HTTP协议ICMP状态抓包 前言 当遇到网络疑难问题的时候&#xff0c;抓包是最基本的技能&#xff0c;通过抓包才能看到网络底层的问题 一、tcpdump基础 tcpdump是一个常用的网络分析工…

可编辑31页PPT | 大数据湖仓一体解决方案

荐言分享&#xff1a;在当今数字化时代&#xff0c;大数据已成为企业决策和业务优化的关键驱动力。然而&#xff0c;传统的数据处理架构&#xff0c;如数据仓库和数据湖&#xff0c;各自存在局限性&#xff0c;难以满足企业对数据高效存储、灵活处理及实时分析的综合需求。因此…

Python中的sqlite3模块:SQLite数据库接口详解

Python中的sqlite3模块&#xff1a;SQLite数据库接口详解 主要功能sqlite3.connect(database)connection.cursor()cursor.execute(sql)connection.commit()cursor.fetchall()connection.close() 使用示例执行结果总结 在Python中&#xff0c;sqlite3模块提供了一个与SQLite数据…

easyui textbox使用placeholder无效

easyui textbox使用placeholder无效 在easyui 的textbox控件&#xff0c;请使用data-options 设定 示例 <input type text class easyui-textbox data-options "prompt:请输入您的邮箱"/>

[创业之路-232]:《华为闭环战略管理》-5-组织架构、业务架构、产品架构、技术架构、项目架构各自设计的原则是什么?

目录 一、组织架构设计原则 二、业务架构设计原则 三、产品架构设计原则 四、技术架构设计原则 五、项目架构设计原则 一、各自的组成元素 组织架构、业务架构、产品架构、技术架构、项目架构各自的组成元素具体如下&#xff1a; 组织架构 - 组织企业相似资源的方式&…

STM32中断详解

STM32中断详解 NVIC 中断系统中断向量表相关寄存器中断优先级中断配置 外部中断实验EXTI框图外部中断/事件线映射中断步骤初始化代码实现 定时器中断通用定时器相关功能标号1&#xff1a;时钟源标号 2&#xff1a;控制器标号 3&#xff1a;时基单元 代码实现 NVIC 中断系统 STM…

【LeetCode】200、岛屿数量

【LeetCode】200、岛屿数量 文章目录 一、并查集1.1 并查集1.2 多语言解法 二、洪水填充 DFS2.1 洪水填充 DFS 一、并查集 1.1 并查集 // go var sets int var father [90000]intfunc numIslands(grid [][]byte) int {n, m : len(grid), len(grid[0])build(grid, n, m)for i …

Github 2024-12-28 Rust开源项目日报 Top10

根据Github Trendings的统计,今日(2024-12-28统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10TypeScript项目1Python项目1egui: 一个简单、快速且高度可移植的 Rust GUI 库 创建周期:1903 天开发语言:Rust协议类型:Apache Li…

SOME/IP 协议详解——序列化

文章目录 0. 概述1.基本数据序列化2.字符串序列化2.1 字符串通用规则2.2 固定长度字符串规则2.3 动态长度字符串规则 3.结构体序列化4. 带有标识符和可选成员的结构化数据类型5. 数组5.1 固定长度数组5.2 动态长度数组5.3 Enumeration&#xff08;枚举&#xff09;5.4 Bitfield…

心力衰竭相关临床记录数据分析开发技术概述

心力衰竭相关临床记录数据分析开发技术概述 心力衰竭临床记录数据分析的开发涉及多种技术&#xff0c;包括数据采集、处理、建模和可视化等方面。以下是从技术角度对整个开发流程的概述&#xff1a; 数据采集技术 1.1 数据来源 公开数据集&#xff1a;如 UCI 数据存储库、Clin…

三分钟在你的react项目中引入tailwindcss

前言&#xff1a;在vite搭建的react项目中引入并使用tailwindcss 一、初始化react项目 1、创建项目 在文件夹下右键打开终端并输入命令使用vite创建项目 pnpm create vite react-tailwind选择reactjavascript&#xff0c;并输入命令安装依赖并启动 2、安装tailwind pnpm …