vite中使用scss技巧

一、样式混合

1.普通用法

@mixin flex() {display: flex;justify-content: space-around;align-items: center;
}//使用方法
.legend_box_item {width: 50%;height: 10px;@include flex;
}

2.传递参数,参数后面的值为默认值

@mixin flex($justify: flex-start, $align: flex-start) {display: flex;justify-content: $justify;align-items: $align;
}
//使用方法
.legend_box_item {width: 50%;height: 10px;@include flex;   //没传递参数,使用默认值
}
//===============================================.legend_box_item {width: 50%;height: 10px;@include flex(space-between,center);  //传递参数
}

3.类似于vue插槽用法

@mixin flex($justify: flex-start, $align: flex-start) {display: flex;justify-content: $justify;align-items: $align;@content;  //类似vue的slot
}
//使用方法.legend_box_item {width: 50%;height: 10px;@include flex(space-between,center){color:#ffffff;   //这里就是放入插槽的内容};
}

二、全局引入scss文件

上面的混入不可能每个文件都写一份吧,而且你直接在main.ts文件引入一个scss文件,是没法使用里面的混合器以及变量的,必须在vite里面配置

 css: {preprocessorOptions: {scss: {//原理很简单,就是在编译的时候,会把这字符串塞进每一个scss文件中,//相当于每个scss中都写了一个引入,所以这里可以引入多个scss文件additionalData: `@import "@/css/mixin.scss";@import "@/css/a.scss";@import "@/css/b.scss";`,  },},},

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

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

相关文章

html + css + js 实现简易轮播图

html css js 实现简易轮播图 code <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document<…

Java面试题:mysql执行速度慢的原因和优化

Sql语句执行速度慢 原因 聚合查询 多表查询 表数据量过大查询 深度分页查询 分析 sql的执行计划 可以使用EXPLAIN或者DESC获取Mysql如何执行SELECT语句的信息 直接在select语句前加关键字explain/desc 得到一个执行信息表 信息字段分析 possible_keys:可能使用到的索…

C语言中的回调函数定义以及使用回调函数的例子。

在C语言中&#xff0c;回调函数&#xff08;Callback Function&#xff09;是一种特殊的函数&#xff0c;它作为参数传递给另一个函数&#xff08;我们称之为主函数或调用者&#xff09;&#xff0c;并在需要的时候由主函数来调用。回调函数允许主函数在适当的时候执行特定的操…

busybox的基本使用记录壹

内核如何启动init进程 init/main.c static int __ref kernel_init(void *unused) {int ret;kernel_init_freeable();/* need to finish all async __init code before freeing the memory */async_synchronize_full();ftrace_free_init_mem();jump_label_invalidate_initmem()…

生产级别的 vue

生产级别的 vue 拆分组件的标识更好的组织你的目录如何解决 props-base 设计的问题transparent component &#xff08;透明组件&#xff09;可减缓上述问题provide 和 inject vue-meta 在路由中的使用如何确保用户导航到某个路由自己都重新渲染&#xff1f;测试最佳实践如何制…

JMeter的基本概念

一、主流测试工具 1&#xff0c;Loadrunner HP Loadrunner是一种工业级标准性能测试负载工具&#xff0c;可以模拟上万用户实施测试&#xff0c;并在测试时可实时检测应用服务器及服务器硬件各种数据&#xff0c;来确认和查找存在的瓶颈 支持多协议:Web(HTTP/HTML)、Windows…

Java项目:基于SSM框架实现的绿色农产品推广应用网站果蔬商城水果商城蔬菜商城【ssm+B/S架构+源码+数据库+答辩PPT+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的绿色农产品推广应用网站果蔬商城水果商城蔬菜商城 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能…

通信系统概述

1.定义 通信系统&#xff08;也称为通信网络&#xff09;是利用各种通信线路将地理上分散的、具有独立功能的计算机系统和通信设备按不同的形式连接起来&#xff0c;依靠网络软件及通信协议实现资源共享和信息传递的系统。 2.概述 随着通信技术和网络技术的不断发展&#xff…

Ubuntu系统如何配置通过图形界面登录root用户

Ubuntu系统中的root账号默认是锁定的&#xff0c;但可以通过设置密码来启用。 需要注意的是&#xff0c;由于root用户具有对系统完全控制的权限&#xff0c;因此在使用root账户时应格外小心。一个错误的命令可能会导致系统损坏&#xff0c;这就是为什么Ubuntu默认不启用root账户…

微服务开发与实战Day08 - Elasticsearch

一、初始Elasticsearch 高性能分布式搜索引擎 1. 认识和安装 1.1 认识 Lucene是一个Java语言的搜索引擎类库&#xff0c;是Apache公司的顶级项目&#xff0c;由DougCutting于1999年研发。官网地址&#xff1a;Apache Lucene - Welcome to Apache Lucene Lucene的优势&…

集合:泛型深入

一.泛型的好处 1.统一了数据类型 2.把运行时期的问题提前到了编译期间,避免了强制类型转换可能出现的异常,因为在编译阶段类型就能确定下来。 二.泛型的细节 1.泛型中不能写基本数据类型 2.指定泛型的具体类型后,传递数据时,可以传入该类类型或者该类的子类类型 3.如果不…

shell脚本通过解析日志使用串口开关屏知识点整理

#!/bin/bash #logPath 写日志的存放路径 #logPath/home/workspace/tvs/trainborne logPath/home/firefly tmpFile$$ function getLogName() { #echo "$logPath/LCDController_"date "%Y%m%d000000.log" echo "LCDController_20240424000000.log&quo…

基于Raft算法实现的分布式键值对存储系统——学习笔记

目录 1 基于Raft算法实现的分布式键值对存储系统 1.1 模块 2 Raft 算法 2 .1 概念 2.2 raft角色&#xff08;先简单了解&#xff0c;方便后续阅读&#xff09; 2.3 raft想解决什么问题&#xff1f; 2.4 选举领导 2.5 领导者故障 附录&#xff1a; 参考文献&#xff1…

LeetCode 610, 28, 23

目录 610. 判断三角形题目链接表要求知识点思路代码 28. 找出字符串中第一个匹配项的下标题目链接标签使用 i n d e x O f ( ) indexOf() indexOf()思路代码 双指针思路代码 讲一讲双指针的缺点 23. 合并 K 个升序链表题目链接标签思路代码 610. 判断三角形 题目链接 610. 判…

电磁阀厂家:电磁阀结构设计需要考虑哪些方面?

随着科技的不断发展&#xff0c;电磁阀产品的应用范围愈发广泛。但在选购产品时&#xff0c;要注意产品的结构以及设计&#xff0c;以确保产品满足应用场景的各项要求。那么&#xff0c;电磁阀结构设计需要考虑哪些方面&#xff1f;接下来就让专业的电磁阀厂家来为大家简单介绍…

工具函数-算法

1. 实现四舍五入&#xff0c;保留两位小数 const v 0.0635455; // 方式1&#xff0c;保留2位小数&#xff0c;返回的是number格式 const formatted Math.round(v * 100) / 100; // 方式2&#xff0c;保留2位小数&#xff0c;返回的是字符串格式 const formatted v.toFixed(…

Vue67-Vuex简介

因为vuex是插件&#xff0c;所以&#xff0c;使用的时候&#xff1a;vue.use(插件名) 一、Vuex的意义和使用场景 红色的箭头&#xff0c;都是读数据。 若是&#xff0c;B、C、D都想修改A组件中的x数据&#xff08;写&#xff09;&#xff1a;此时&#xff0c;A组件就是数据的接…

人声分离的5个方法分享,从入门到精通,伴奏提取手拿把捏!

人声分离通常是音乐制作、混音和卡拉OK中常用的重要技术之一。它的核心是将乐器伴奏从原始音轨中分离出来&#xff0c;使得用户可以单独处理或重混音频&#xff0c;创造出清晰干净的伴奏轨道。若缺乏强大的音频剪辑软件或专业人声分离工具&#xff0c;这一过程往往会比较困难。…

Redis解析与应用实践

Redis是一个高性能的键值存储系统&#xff0c;它的应用非常广泛&#xff0c;包括缓存、消息队列、排行榜等。本文将深度解析Redis的核心特性&#xff0c;并结合实际代码示例&#xff0c;展示如何在不同场景下应用Redis。 Redis数据类型与操作 Redis支持多种数据类型&#xff…

实用至上:智能体/Agent 是什么

Agent 的起源 不做词义追源&#xff0c;仅从大众角度&#xff0c;这个事儿是去年初开始的&#xff0c;也就是 2023 年 2-3 月。标志性事件包括&#xff1a; AutoGPT 等开源项目的发布&#xff0c;这是第一批基于自然语言的 AI 自动化实践&#xff1a;你告诉它一个任务&#xf…