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.jsdefineConfig里面添加配置如下:

自定义全局样式文件: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%;
//  }

以上仅代表个人观点,若有错误之处,欢迎批评指正

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

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

相关文章

TikTok越狱检测之一 <代码模块污染检测>

话说某天在国外论坛闲逛&#xff0c;有一国外小哥&#xff0c;发帖交流TikTok 的相关越狱检测&#xff0c;对TikTok的安全保护极其变态。 好奇心驱使之下&#xff0c;便下载TikTok&#xff0c;注册完账号&#xff0c;竟然什么都做不了&#xff0c;只能浏览视频。 基于逆向的本能…

ASO行业面临洗牌,苹果应用商店加搜索广告!

苹果公司全球市场营销高级副总裁菲尔席勒(Phil Schiller),在全球开发者大会开幕前(WWDC)透露了一些应用商店方面的消息。重点包括:1.应用商店搜索中加入广告;2.应用审核加快;3.新的商业模式。 一、 Search Ads搜索广告 这是最令人惊讶的改变,苹果在App Store平台的搜索结果中加…

前端自动将 HTTP 请求升级为 HTTPS 请求

前端将HTTP请求升级为HTTPS请求有两种方式&#xff1a; 一、index.html 中插入meta 直接在首页 index.html 的 head 中加入一条 meta 即可&#xff0c;如下所示&#xff1a; <meta http-equiv"Content-Security-Policy" content"upgrade-insecure-requests&…

广东旅游景点推荐

增城区 增城作为广州市的一个区&#xff0c;拥有丰富的自然景观和人文历史景点&#xff0c;非常适合自驾游。以下是一些推荐的自驾游景点&#xff1a; 白水寨风景区&#xff1a;拥有原始森林、悬崖瀑布和浅滩湿地&#xff0c;是广东罕见的自然生态资源集中地&#xff0c;也是广…

树洞陪聊系统源码/陪聊/陪玩/树洞/陪陪/公众号开发/源码交付/树洞系统源码

独立版本源码交付&#xff0c;自研UI和前后端代码 平台自带店员&#xff0c;无需自主招募&#xff0c;搭建直接运营 支持三方登录&#xff0c;官方支付、虎皮椒、易支付/码支付 支持首单体验、盲盒订单、指定下单等多个模式 支持钱包预充值、店员收藏、订单评价等功能 支持…

AI日报:讯飞星火Lite API永久免费;李开复称大模型疯狂降价是双输;AI特效末日滤镜抖音爆火;AI音乐Suno 融资1.25亿美元

欢迎来到【AI日报】栏目!这里是你每天探索人工智能世界的指南&#xff0c;每天我们为你呈现AI领域的热点内容&#xff0c;聚焦开发者&#xff0c;助你洞悉技术趋势、了解创新AI产品应用。 新鲜AI产品点击了解&#xff1a;AIbase - 智能匹配最适合您的AI产品和网站 1、科大讯飞…

can设备调试 - linux driver

这篇文章主要介绍can设备的调试相关信息&#xff0c;不具体介绍驱动的实现。 如果驱动写完&#xff0c;对can设备进行验证&#xff0c;可能会出现很多不可预见的问题。下面说说验证步骤 验证can设备可以使用工具can-utils。这个工具包中会有cansend candump等程序。可以直接通…

系统架构师考试(十)

SaaS为在线客服 PaaS为二次开发&#xff0c;比如低代码平台 IaaS 硬件开发 B 是基础设施作为服务 软件架构的概念 架构风格 数据流风格 网络报文是在计算机网络中通过网络传输的数据单元&#xff0c;它是网络通信的基本单位。网络报文包含了发送方和接收方之间传输的数据&…

『网络攻防和AI安全之家』星球正式运营及CSDN安全知识汇总,欢迎广大博友加入

“今天是Eastmount的安全星球 —— 『网络攻防和AI安全之家』正式创建和运营的日子&#xff0c;该星球目前主营业务为 安全零基础答疑、安全技术分享、AI安全技术分享、AI安全论文交流、威胁情报每日推送、网络攻防技术总结、系统安全技术实战、面试求职、安全考研考博、简历修…

计算机操作系统核心组件

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天给大家讲讲操作系统。 操作系统核心组件 用户借助于一个或多个应用程序与操作系统进行交互&#xff0c;常常是通过一个称为shell的特殊应用程序进行的&#xff0c;shell也叫作命令解释器。105今天的大多…

Postgresql源码(130)ExecInterpExpr转换为IR的流程

相关 《Postgresql源码&#xff08;127&#xff09;投影ExecProject的表达式执行分析》 《Postgresql源码&#xff08;128&#xff09;深入分析JIT中的函数内联llvm_inline》 《Postgresql源码&#xff08;129&#xff09;JIT函数中如何使用PG的类型llvmjit_types》 表达式计算…

VBA创建文本文件

Sub 创建文本文件()Dim fso As New Scripting.FileSystemObjectDim ostream As Scripting.TextStreamDim sfname As StringDim str1 As Stringsfname Application.InputBox(prompt:"请输入文本文件的名称", _Title:"输入文件名称", Type:2)If sfname &…

Java设计模式 _行为型模式_迭代器模式

一、迭代器模式 1、迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;用于顺序访问集合对象的元素&#xff0c;不需要关心集合对象的底层表示。如&#xff1a;java中的Iterator接口就是这个工作原理。 2、实现思路 &#xff0…

tomcat jdbc连接池的默认配置配置方案

MySQL 5.0 以后针对超长时间数据库连接做了一个处理&#xff0c;即一个数据库连接在无任何操作情况下过了 8 个小时后(MySQL 服务器默认的超时时间是 8 小时)&#xff0c;MySQL 会自动把这个连接关闭。在数据库连接池中的 connections 如果空闲超过 8 小时&#xff0c;MySQL 将…

国家自然博物馆“云端自然”线上虚拟展厅是如何搭建的?

国家级综合性自然博物馆国家自然博物馆&#xff0c;联手积木易搭打造“云端自然”线上虚拟展览&#xff0c;形成一个集参观游览、科普教育为一体的线上虚拟数字博物馆平台&#xff0c;让数千以至数万年的古生物&#xff0c;栩栩如生地呈现在我们面前。 通过数字化的展示手段&am…

在做题中学习(61):连续数组

525. 连续数组 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;前缀和 哈希表 转化&#xff1a;将 0 ——> -1 转变为&#xff1a;找到和为0的最长子数组 细节&#xff1a; 1.哈希表存什么 前缀和 &#xff0c; 长度 2.什么时候存入哈希表 先处理前一个&…

怎么用二维码看excel表格?生成文件二维码的制作技巧

Excel表格怎么放到二维码中&#xff0c;让其他人通过扫码查看数据呢&#xff1f;现在文件放入二维码中展示在很多的场景中都有应用&#xff0c;比如通知、数据、作品、报告等类型的内容都可以通过扫码的方式在手机上展现&#xff0c;那么如何将文件生成二维码呢&#xff1f; 文…

DVWA登录页面空白问题解决

问题&#xff1a; 创建完成后打开登录页面&#xff0c;发现打不开&#xff0c;一片空白 解决&#xff1a; php版本不对&#xff0c;更换版本即可

Rust Tarui 中的 Scrcpy 客户端,旨在提供控制安卓设备的鼠标和按键映射,类似于游戏模拟器。

Scrcpy-mask 为了实现电脑控制安卓设备&#xff0c;本人使用 Tarui Vue 3 Rust 开发了一款跨平台桌面客户端。该客户端能够提供可视化的鼠标和键盘按键映射配置。通过按键映射实现了实现类似安卓模拟器的多点触控操作&#xff0c;具有毫秒级响应速度。该工具可广泛用于电脑控…

constexpr : 我和const像孪生,我比define更受追捧

一、constexpr constexpr 是 C++11 引入的关键字,用于定义在编译时就能确定值的表达式。这使得编译器能够在编译时执行更多的优化,同时也能用于任何需要常量表达式的场合,如数组大小、整数模板参数等。 二、constexpr 的使用示例 constexpr是C++11引入的关键字,用于声…