vue3第三十节(vue3 vite中使用sass)
引言:什么是Sass?
Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进(缩进花括号)的,它与传统的CSS语法类似,但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。
Sass 有什么好处呢?
Sass让编写可维护的CSS更加简易方便。可以用更少的代码,做更多的事,用更少的时间,具有更强的可读性
比如全局定义的样式,变量,可以统一修改,避免重复书写样式
一、安装Sass
使用vite 创建好 vue 项目
vite 项目中只需要安装 sass 即可,不像 webpack项目 需要安装 node-sass sass-loader;
执行如下命令 npm i sass --save-dev
二、使用Sass
安装完成后便可以在项目中使用Sass,
需要在style标签中设置lang属性为scss
如:
<style scoped lang="scss">.container{width: 100%;height: auto;}
</style>
三、配置Sass全局共享变量
1.配置全局
Sass中我们可以自定义变量,一些变量往往是全局共享的,为了方便我们可以在vite.config.js中defineConfig里面添加配置如下:
自定义全局样式文件:varibles.scss
css: {// css预处理器preprocessorOptions: {scss: {// 引入 varibles.scss 这样就可以在全局中使用 varibles.scss中预定义的变量了// 给导入的路径最后加上 ; additionalData: '@import "@/assets/style/varibles.scss";'}}}
@import "@/assets/style/varibles.scss" 为自己定义的全局css 样式
如下:
1、定义的全局变量
:root {--GBrand: #0084FF;--GBrandHover: #1F93FF;--GBaseL1: #28374F;// ...
}
也可以直接使用 $ 符号定义变量
如:
$barndColor: #0084FF;
$waringColor:#FF9200;
// 全局mixin
@mixin box-shadow($bulr: 20px, $color: #AAB1BD) {-webkit-box-shadow: 0px 0px $bulr $color;-moz-box-shadow: 0px 0px $bulr $color;box-shadow: 0px 0px $bulr $color;
}
不同的定义方式,最好是分开文件声明,不要混淆在一个文件中,便于后期维护
使用方法:
<style scoped lang="scss">.main-container{color: var(--GBrand);background--color: $barndColor;&-title{/* sass 嵌套样式 */color: var(--GBaseL1);}}
</style>
// 编译后为 data-v-xxxx 为 vue 中样式表自动生成的hash 值
.main-container [data-v-xxxx]{color: #0084FF;background-color: ##0084FF;
}
.main-container .main-container-title[data-v-xxxx]{color: #28374F;
}
2.不配置全局,单独引入
在单个使用文件中引入
<style scoped lang="scss">@import '@/assets/style/varibles.scss'
</style>
3、数学计算
Sass允许使用数学表达式!这对于混合宏非常有用,是我们能够使用自己的标记做一些很酷的事情。
支持的操作符有:
加:+
减:-
除:/
乘:*
取余:%
相等:==
不相等:!=
两个Sass有关于数学计算的“陷阱” /符号用来简写CSS字体属性,比如font: 12px/18px,所以如果你想在非变量值上使用除法操作符,那么你需要使用括号包裹它们:
$fontSizeDiff: (14px/16px);
不能混合使用值的 单位
$container-width: 100% - 20px;
基于基础的容器宽度创建一个动态列
$container-width: 100%;
.container {width: $container-width;
}
.col-4 {width: $container-width / 4;
}
// 编译后是这样的
// .container {
// width: 100%;
// }
//
// .col-4 {
// width: 25%;
// }
以上仅代表个人观点,若有错误之处,欢迎批评指正
相关文章:
vue3第三十节(vue3 vite中使用sass)
引言:什么是Sass? Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发…...
blender 烘焙渲染图片,已经导出fbx,导出贴图。插件生成图片
1.新建一个模型。选择资产浏览器的材质,并拖动到模型身上,如下图。资产浏览器的材质可以网上找。 2.打开着色器面板。正下方着色器窗口中,点击空白取消选择,然后右击-添加-着色器-原理化BSDF,右击-添加-纹理-图像纹理。…...
ASO行业面临洗牌,苹果应用商店加搜索广告!
苹果公司全球市场营销高级副总裁菲尔席勒(Phil Schiller),在全球开发者大会开幕前(WWDC)透露了一些应用商店方面的消息。重点包括:1.应用商店搜索中加入广告;2.应用审核加快;3.新的商业模式。 一、 Search Ads搜索广告 这是最令人惊讶的改变,苹果在App Store平台的搜索结果中加…...
Labelme自定义数据集COCO格式【实例分割】
参考博客 labelme标注自定义数据集COCO类型_labelme标注coco-CSDN博客 LabelMe使用_labelme中所有的create的作用解释-CSDN博客 1制作自己的数据集 1.1labelme安装 自己的数据和上面数据的区别就在于没有.json标签文件,所以训练自己的数据关键步骤就是获取标签文…...
【网络安全】Linux 应急响应-溯源-系统日志排查知识点
Linux 应急响应-溯源-系统日志排查知识点汇总 1. 查看当前已经登录到系统的用户 (w 命令) w2. 查看所有用户最近一次登录 (lastlog 命令) lastlog lastlog | grep -v "Never logged in"3. 查看历史登录用户以及登录失败的用户 (last 和 lastb 命令) last lastb4. …...
Spark项目实训(一)
目录 实验任务一:计算级数 idea步骤分步: 完整代码: linux步骤分布: 实验任务二:统计学生成绩 idea步骤分布: 完整代码: linux步骤分步: 实验任务一:计算级数 请…...
爬虫基础1
一、爬虫的基本概念 1.什么是爬虫? 请求网站并提取数据的自动化程序 2.爬虫的分类 2.1 通用爬虫(大而全) 功能强大,采集面广,通常用于搜索引擎:百度,360,谷歌 2.2 聚焦爬虫&#x…...
vlan综合实验
1、实验拓扑 2、实验要求 1、pc1和pc3所在接口为access;属于vlan 2; pc2/pc4/pc5/pc6处于同一网段;其中pc2可以访问pc4/pc5/pc6; pc4可以访问pc6;pc5不能访问pc6; 2、pc1/pc3与pc2/pc4/pc5/pc6不在同一网段; 3、所有pc通过DHC…...
如何使用ffmpeg 实现10种特效
相关特效的名字 特效id 特效名 1 向上移动 2 向左移动 3 向下移动 4 颤抖 5 摇摆 6 雨刷 7 弹入 8 弹簧 9 轻微跳动 10 跳动 特效展示(同时汇总相关命令) pad背景显示 pad背景透明 相关命令(一会再讲这些命令,先往下看) # 合成特效语音 ffmpeg -y -loglevel erro…...
C语言如果变量全部在全局内存空间会怎么样
结论先行 应该根据内存使用的生命周期,选择合适的内存空间应该尽量使用连续内存如果不想在设计封装性上付出太多代价,全部放入全局空间也比较可取 空间类型特点全局空间生命周期最久,空间连续,变量分配紧致,但存在浪…...
【YOLO改进】换遍MMPretrain主干网络之ConvNeXt-Tiny(基于MMYOLO)
ConvNeXt-Tiny ConvNeXt-Tiny 是一种改进的卷积神经网络架构,其设计目的是在保持传统卷积神经网络优势的同时,借鉴了一些Transformer架构的成功经验。 ConvNeXt-Tiny 的优点 架构优化: ConvNeXt-Tiny 对经典ResNet架构进行了多种优化&#…...
【数据库】MySQL
文章目录 概述DDL数据库操作查询使用创建删除 表操作创建约束MySqL数据类型数值类型字符串类型日期类型 查询修改删除 DMLinsertupdatedelete DQL基本查询条件查询分组查询分组查询排序查询分页查询 多表设计一对多一对一多对多设计步骤 多表查询概述内连接外连接 子查询标量子…...
JVM运行时内存:垃圾回收器(Serial ParNew Parallel )详解
文章目录 1. 查看默认GC2. Serial GC : 串行回收3. ParNew GC:并行回收4. Parallel GC:吞吐量优先 1. 查看默认GC -XX:PrintCommandLineFlags:查看命令行相关参数(包含使用的垃圾收集器)使用命令行指令:ji…...
The Missing Semester of Your CS Education(计算机教育中缺失的一课)
Shell 工具和脚本(Shell Tools and Scripting) 一、shell脚本 1.1、变量赋值 在bash中为变量赋值的语法是foobar,访问变量中存储的数值,其语法为 $foo。 需要注意的是,foo bar (使用空格隔开)是不能正确工作的&…...
如何为ChatGPT编写有效的提示词:软件开发者的指南
作为一名软件开发者,特别是使用Vue进行开发的开发者,与ChatGPT等AI助手高效互动,可以极大地提升你的开发效率。本文将深入探讨如何编写有效的提示词,以便从ChatGPT中获取有用的信息和帮助。 1. 明确目标 在编写提示词之前&#…...
angular插值语法与属性绑定
在 Angular 中,您提供的两种写法都是用来设置 HTML 元素的 title 属性,但它们的工作方式有所不同: 插值语法 (Interpolation) <h1 title"{{ name }}">我的名字</h1> 属性绑定 (Property Binding) <h1 [title]&q…...
Python ❀ 使用代码解决今天中午吃什么的重大生存问题
1. 环境安装 安装Python代码环境参考文档 2. 代码块 import random# 准备一下你想吃的东西 hot ["兰州拉面", "爆肚面", "黄焖鸡", "麻辣香锅", "米线", "麻食", "羊肉泡馍", "肚丝/羊血汤&qu…...
做抖音小店需要清楚的5个核心点!
大家好,我是喷火龙。 不管你是在做抖音小店,还是在做其他的电商平台,如果已经做了一段时间了,但还是没有拿到什么结果,我所指的结果不是什么大结果,而是连温饱都解决不了,甚至说还在亏钱。 有…...
文件流下载优化:由表单提交方式修改为Ajax请求
如果想直接看怎么写的可以跳转到 解决方法 节! 需求描述 目前我们系统导出文件时,都是通过表单提交后,接收文件流自动下载。但由于在表单提交时没有相关调用前和调用后的回调函数,所以我们存在的问题,假如导出数据需…...
基础3 探索JAVA图形编程桌面:逻辑图形组件实现
在一个宽敞明亮的培训教室里,阳光透过窗户柔和地洒在地上,教室里摆放着整齐的桌椅。卧龙站在讲台上,面带微笑,手里拿着激光笔,他的眼神中充满了热情和期待。他的声音清晰而洪亮,传遍了整个教室:…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
