sass中的导入与部分导入
文章目录
- sass中的导入与部分导入
- 1. @import:传统的导入方式
- 2. @use:现代化的模块化导入
sass中的导入与部分导入
在大型前端项目中,CSS代码量往往十分庞大,为了保持其可读性、可维护性以及便于团队协作,模块化开发成为了一种必然趋势。Sass为此提供了两种导入外部文件的方式——@import
与@use
,它们分别服务于不同的模块化需求,并有着显著的区别。下面我们将深入探讨这两种导入机制,以及它们的最佳实践。
1. @import:传统的导入方式
语法与作用:
@import 'path/to/file.scss';
@import
是Sass早期版本中用于引入外部Sass文件的主要方式。它允许你将一个或多个Sass文件的内容合并到当前文件中,最终编译为一个单一的CSS输出文件。
优点:
- 简单易用,符合CSS原生的
@import
语义,对于初次接触Sass的开发者来说易于理解。 - 支持全局变量和Mixin的覆盖,即后导入的文件可以重新定义先前导入文件中的变量和Mixin。
缺点与局限:
- 全局作用域:所有通过
@import
导入的变量、Mixin和函数在整个项目中都是全局可见的,这可能导致命名冲突和难以追踪的问题。 - 无命名空间:无法为导入的内容创建独立的作用域,不利于代码组织和模块化。
- 编译效率:每次编译时,
@import
会递归地处理所有导入的文件,可能增加编译时间,尤其是在项目规模较大时。 - 已弃用:随着Sass的发展,
@import
因其上述局限性,官方已计划逐步弃用。
2. @use:现代化的模块化导入
语法与作用:
@use 'module' as m;
// 或者直接引用模块中的成员
@use 'module' {// 引入特定成员variable: $my-variable;mixin: my-mixin();function: my-function();
}// 使用模块中的变量、Mixin或函数
m.$my-variable;
@include m.my-mixin();
m.my-function();
@use
是Sass 3.5版本引入的新特性,旨在解决@import
的诸多问题,提供真正的模块化支持。它引入了一个新的概念——模块,每个Sass文件都可以被视为一个独立的模块,拥有自己的作用域。
优点与改进之处:
- 模块化:每个模块有自己的命名空间,避免了全局作用域下的变量、Mixin等命名冲突。
- 按需导入:可以只导入模块中的特定变量、Mixin或函数,减少编译后的CSS体积。
- 依赖隔离:模块内部的私有成员(以
_
开头的变量、Mixin等)不会被外部访问,增强了封装性。 - 编译效率:
@use
仅编译被实际引用的模块内容,提高了编译速度。
最佳实践:
1. 使用@use
替代@import
鉴于@import
的局限性和官方的弃用计划,建议在新项目中全面采用@use
进行模块化导入,并在已有项目中逐步迁移。
2. 利用命名空间组织模块
// _utilities.scss
$primary-color: #1a1a1a;
@mixin text-shadow($color) { ... }// main.scss
@use 'utilities' as u;body {color: u.$primary-color;@include u.text-shadow(u.$primary-color);
}
通过as
关键字为模块指定别名(如上例中的u
),有助于在样式表中清晰地标记模块来源,提高代码可读性。
3. 按需导入成员
// _grid.scss
$grid-columns: 12;
@mixin make-grid-columns() { ... }
@mixin make-grid-gutters() { ... }// main.scss
@use 'grid' {// 只导入需要的成员variable: $grid-columns;mixin: make-grid-columns;
}.container {width: calc((100% / grid.$grid-columns) * var(--columns));@include grid.make-grid-columns;
}
仅导入实际使用的变量、Mixin或函数,避免无关代码进入编译结果,有利于减小CSS文件大小。
4. 私有成员与公共接口分离
在模块内部,使用_
前缀标识私有成员,确保它们不会被外部访问。对外提供清晰的公共接口(无_
前缀的成员),便于其他模块或主文件使用。
总之,@use
作为Sass的现代化模块化导入机制,极大地提升了CSS代码的组织性和可维护性。尽管在迁移过程中可能会遇到一些习惯上的调整,但长远来看,它无疑为构建健壮、高效的CSS架构提供了有力支撑。拥抱@use
,迈向更美好的CSS模块化世界吧!
相关文章:
sass中的导入与部分导入
文章目录 sass中的导入与部分导入1. import:传统的导入方式2. use:现代化的模块化导入 sass中的导入与部分导入 在大型前端项目中,CSS代码量往往十分庞大,为了保持其可读性、可维护性以及便于团队协作,模块化开发成为…...
工业组态 物联网组态 组态编辑器 web组态 组态插件 编辑器
体验地址:by组态[web组态插件] BY组态是一款非常优秀的纯前端的【web组态插件工具】,可无缝嵌入到vue项目,react项目等,由于是原生js开发,对于前端的集成没有框架的限制。同时由于BY组态只是一个插件,不能独…...
git可视化工具
Gitkraken GitKraken 是一款专门用于管理和协作Git仓库的图形化界面工具。它拥有友好直观的界面,使得Git的操作变得更加简单易用,尤其适合那些不熟悉Git命令行的开发者。GitKraken提供了丰富的功能,如代码审查、分支管理、仓库克隆、提交、推…...
基于单片机电子密码锁系统设计
**单片机设计介绍,基于单片机电子密码锁系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机电子密码锁系统设计概要主要包括以下几个方面: 一、系统概述 基于单片机电子密码锁系统是一个…...
点云从入门到精通技术详解100篇-基于点云与图像纹理的 道路识别(续)
目录 3.1.2 图像滤波去噪 3.2 道路纹理特征提取 3.3 基于超像素分割的图像特征表达...
《机器学习在量化投资中的应用研究》目录
机器学习在量化投资中的应用研究 获取链接:机器学习在量化投资中的应用研究_汤凌冰著_北京:电子工业出版社 更多技术书籍:技术书籍分享,前端、后端、大数据、AI、人工智能... 内容简介 《机器学习在量化投资中的应用研究…...
Spring拓展点之SmartLifecycle如何感知容器启动和关闭
Spring为我们提供了拓展点感知容器的启动与关闭,从而使我们可以在容器启动或者关闭之时进行定制的操作。Spring提供了Lifecycle上层接口,这个接口只有两个方法start和stop两个方法,但是这个接口并不是直接提供给开发者做拓展点,而…...
深入理解Java匿名内部类(day21)
在Java编程中,匿名内部类是一种非常有用的特性,它允许我们定义和实例化一个类的子类或实现一个接口,而无需给出子类的名称。这种特性使得代码更加简洁、紧凑,尤其适用于一些只使用一次的临时对象。本文将深入探讨Java匿名内部类的…...
《状态模式(极简c++)》
本文章属于专栏- 概述 - 《设计模式(极简c版)》-CSDN博客 模式说明: 方案:状态模式是一种行为设计模式,用于在对象的内部状态发生改变时改变其行为。它包括三个关键角色:上下文(Context&#x…...
Day4-Hive直播行业基础笔试题
Hive笔试题实战 短视频 题目一:计算各个视频的平均完播率 有用户-视频互动表tb_user_video_log: id uid video_id start_time end_time if_follow if_like if_retweet comment_id 1 101 2001 2021-10-01 10:00:00 2021-10-01 10:00:30 …...
mybatis批量新增数据
数据量大的时候如果在循环中执行单条新增操作,是非常慢的。那么如何在mybatis中实现批量新增数据呢? 方法 insert 标签的 foreach 属性可以用于批量插入数据。您可以使用 foreach 属性遍历一个集合,并为集合中的每个元素生成一条插入语句。…...
webrtcP2P通话流程
文章目录 webrtcP2P通话流程webrtc多对多 mesh方案webrtc多对多 mcu方案webrtc多对多 sfu方案webrtc案例测试getUserMediagetUserMedia基础示例-打开摄像头getUserMedia canvas - 截图 打开共享屏幕 webrtcP2P通话流程 在这里,stun服务器包括stun服务和turn转发服…...
游戏引擎中的物理系统
一、物理对象与形状 1.1 对象 Actor 一般来说,游戏中的对象(Actor)分为以下四类: 静态对象 Static Actor动态对象 Dynamic Actor ---- 可能受到力/扭矩/冲量的影响检测器 TriggerKinematic Actor 运动学对象 ---- 忽略物理法则…...
【C++ STL有序关联容器】map 映射
文章目录 【 1. 基本原理 】【 2. map 的创建 】2.1 调用默认构造函数,创建一个空的 map2.2 map 被构造的同时初始化2.3 通过一个 queue 初始化另一个 queue2.4 取已建 map 中指定区域内的键值对,初始化新的 map2.5 指定排序规则 【 2. map 元素的操作 】…...
【ZZULIOJ】1041: 数列求和2(Java)
目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 输入一个整数n,输出数列1-1/31/5-……前n项的和。 输入 输入只有一个整数n。 输出 结果保留2为小数,单独占一行。 样例输入 Copy 3 样例输出 Copy 0.87 code import java.util…...
C++【适配器模式】
简单介绍 适配器模式是一种结构型设计模式 | 它能使接口不兼容的对象能够相互合作。(是适配各种不同接口的一个中间件) 基础理解 举个例子:当你引用了一个第三方数据分析库,但这个库的接口只能兼容JSON 格式的数据。但你需要它…...
go | 上传文件分析 | http协议分析 | 使用openssl 实现 https 协议 server.key、server.pem
是这样的,现在分析抓包数据 test.go package mainimport ("fmt""log""github.com/gin-gonic/gin" )func main() {r : gin.Default()// Upload single filer.MaxMultipartMemory 8 << 20r.POST("/upload", func(c *g…...
Chatgpt掘金之旅—有爱AI商业实战篇|专业博客|(六)
演示站点: https://ai.uaai.cn 对话模块 官方论坛: www.jingyuai.com 京娱AI 一、AI技术创业博客领域有哪些机会? 人工智能(AI)技术作为当今科技创新的前沿领域,为创业者提供了广阔的机会和挑战。随着AI技…...
单例模式 JAVA
单例模式 什么是单例模式? 1、单例类只能有一个实例。2、单例类必须自己创建自己的唯一实例。3、单例类必须给所有其他对象提供这一实例。 应用:数据库的连接类,这样就可以确保只创建一次。节省资源。 单例模式代码:涉及懒加载…...
C++从入门到精通——初步认识面向对象及类的引入
初步认识面向对象及类的引入 前言一、面向过程和面向对象初步认识C语言C 二、类的引入C的类名代表什么示例 C与C语言的struct的比较成员函数访问权限继承默认构造函数默认成员初始化结构体大小 总结 前言 面向过程注重任务的流程和控制,适合简单任务和流程固定的场…...
GitHub入门与实践
ISBN: 978-7-115-39409-5 作者:【日】大塚弘记 译者:支鹏浩、刘斌 页数:255页 阅读时间:2023-08-05 推荐指数:★★★★★ 好久之前读完的了,一直没有写笔记。 这本入门Git的书籍还是非常推荐的,…...
centos 安装 stable-diffusion 详细流程
一、安装git 新版 先安装git 工具来更新git源码 , 载下源码后卸载git 版本(centos 默认1.8版本,说是安装会引起失败) 安装git 命令,可使用 git --version查看版本 sudo yum install git -y 卸载git命令 sudo yum remove git 正式源码安装…...
CSS编写登录框样式
/* 重置浏览器默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 设置登录框的基本样式 */ .login-box { width: 100%; max-width: 400px; margin: 50px auto; background-color: #f4f4f4; padding: 20px; box-shad…...
Python|OpenCV-获取鼠标点击位置的坐标,并绘制图像(13)
前言 本文是该专栏的第14篇,后面将持续分享OpenCV计算机视觉的干货知识,记得关注。 本文主要来详细说明,基于OpenCV来获取鼠标点击位置的坐标,并按坐标的位置进行自动绘制图像。具体怎么实现,笔者在正文中将结合实际代码案例进行详细说明。 具体细节部分以及完整代码的实…...
设计模式(14):命令模式
介绍 将一个请求封装为一个对象,从而使我们可用不同的请求对象客户进行参数化;对请求排队或者记录请求日志,以及支持可撤销的操作。也称之为:动作Action模式,事务transaction模式。 命令模式角色 抽象命令类(Comman…...
关于阿里云云数据库自动扩缩容和自动SQL优化的20道面试题
1. 请解释阿里云云数据库自动扩缩容的概念及其工作原理。 阿里云云数据库自动扩缩容是一种基于数据库实例的实时性能数据,能够发现流量异常并提供合理的数据库规格建议和磁盘容量建议的功能。其工作原理如下: 性能监控:系统会实时监控数据库…...
mkcert生成ssl证书+nginx部署局域网内的https服务访问问题
文章目录 mkcert生成ssl证书nginx部署局域网内的https服务访问问题1、下载mkcert查看自己的电脑是arm还是amd架构 2、安装mkcert3、测试mkcert是否安装成功4、查看CA证书存放位置5、打开windows的证书控制台6、生成自签证书,可供局域网内使用其他主机访问以下是nginx部署https服…...
PTA C 1050 螺旋矩阵(思路与优化)
本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”。所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充。要求矩阵的规模为 m 行 n 列,满足条件:mn 等于 N;m≥n;且…...
神经网络分类和回归任务实战
学习方法:torch 边用边学,边查边学 真正用查的过程才是学习的过程 直接上案例,先来跑,遇到什么解决什么 数据集Minist 数据集 做简单的任务 Minist 分类任务 总体代码(可以跑通) from pathlib import …...
【数据结构】考研真题攻克与重点知识点剖析 - 第 4 篇:串
前言 本文基础知识部分来自于b站:分享笔记的好人儿的思维导图与王道考研课程,感谢大佬的开源精神,习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析,本人技术…...
武汉建站公司/站长工具服务器查询
Netty对于Socket抽象 Socket通信与Netty各组件对应关系 模型图详解: Netty中NioEventLoop主要对应Socket中服务端while循环监听事件,这里的事件循环主要包括“新连接的接入”、“连接当前已存在的连接上的数据流读写”;Netty中Channel主要对…...
英国做网站的人/百度指数什么意思
上接工作回忆总结(第一年),工作回忆总结(第二年).很快到了第三年,第三年中我的工作性质一直在变化,虽然处处是救火队员,但是从个人角度讲,这段时间的锻炼是非常必要的。为我现在的工作提供了一个…...
wordpress左右翻转页面/搜索引擎的工作原理是什么
摘要: 日前据悉,全球最大的客户关系管理(CRM)软件提供商Salesforce公司在日本开通运营了其第二家数据中心。 该数据中心设施位于大阪以西约19英里的神户,它将提供包括销售云,服务云,应用云&…...
广西建设职业技术学院教育网站/厦门人才网个人版
思路: 啥是蓄水池算法: 参考链接:https://www.jianshu.com/p/7a9ea6ece2af 给定一个数据流,数据流长度N很大,且N直到处理完所有数据之前都不可知,请问如何在只遍历一遍数据(O(N))的情…...
南京鼓楼做网站公司/推广信息怎么写
MM:详解Reservation (预留) (2012-03-25 23:45:37) 转载▼ 标签: 预留 杂谈 分类: SAPMM 预留的概念 预订是向仓库提出的一个请求,要求仓库为今后某个日期的发货和为某个目的将物料保持在就绪状态。可以由多个部门为多个帐户分配对象&a…...
贵州遵义企业公司网站建设/百度关键词排名软件
引子 标题字面意思 流程 1.github下载包 https://github.com/alibaba/nacos/releases 基本选择最新的就可以。 按照需求下载。 接下来以windows进行示范 2.解压 解压后的文件目录如下: bin:启动文件conf:配置文件target࿱…...