网站建设开票开什么内容,做网站的员工怎么设置绩效考核,广州地铁5号线,it运维工程师简历背景#xff1a;将一个公共的CSS样式文件导入到任意一个组件中进行使用 一、创建并使用CSS公共样式文件
1、在目录的assets目录下创建一个style文件夹#xff0c;里面存放一个.scss文件#xff08;例#xff1a;mixin.scss#xff09;
2、文件内以mixin来设置名为flex的… 背景将一个公共的CSS样式文件导入到任意一个组件中进行使用 一、创建并使用CSS公共样式文件
1、在目录的assets目录下创建一个style文件夹里面存放一个.scss文件例mixin.scss
2、文件内以mixin来设置名为flex的一组样式在调用时需要用到这个名字
mixin flex {display:flex;align-items: center;justify-content: center;
}
3 、在组件内导入公共文件例mixin.scss并使用include 样式名来引入想要的公共文件中的样式
include flex
二、导入公共样式文件时遇到的问题及解决方案
1、最开始使用import 文件路径
import /assets/styles/mixindiv{include flex;
}
2、问题 使用import导入文件会报警告原因是因为 Sass 的 import 规则已被弃用将在 Dart Sass 3.0.0 版本中移除。即使导入的样式生效可能是使用的Sass版本没有那么高但也存在很大的隐患所以这种方式不建议使用。
3、解决使用use来替代import请注意目前只有 Dart Sass 支持 use。其他实现的使用者必须使用 import规则。
具体怎么使用use,也容易出现问题 1在使用import的基础上直接进行更改
一开始import 文件路径
更改use 文件路径use /assets/styles/mixindiv {include flex;
}
2出现的报错是 3原因
在 Dart Sass 中use 语句用于导入其他 Sass 文件并将其内容封装在一个命名空间中。
如果你只写 use /assets/styles/mixin;Dart Sass 会默认将文件内容封装在一个命名空间中但这个命名空间的名称是文件路径的最后一部分。
例如如果你的文件路径是 /assets/styles/mixin.scss那么默认的命名空间名称就是 mixin。
所以在使用时应该是mixin.flex
use /assets/styles/mixindiv {include mixin.flex;
}
4、use的其他写法
1取消别名慎用
写法
use /assets/styles/mixin.scss as *;div {include flex;
}
可通过use “路径” as * 来取消命名空间这种方式加载的模块被提升为全局模块所以在调用时不需要用命名空间名.样式类名直接用样式类名就可以。
2自定义别名
use /assets/styles/mixin.scss as 自定义名字;div {include 自定义名字.flex;
}
三、use与import对比
importuse重复加载可能导致重复加载保证每个模块只加载一次命名空间无可以自定义命名空间作用域共享一个作用域创建命名空间有隔离性性能可能存在性能问题更优化性能避免全局污染不提供隔离性提供隔离性模块化支持较弱有更好的模块化支持推荐版本较旧版本的导入方式新版本Sass推荐的导入方式
