SASS @use 的使用
@use
是在Sass 1.23.0版本中引入的,用于替代
@import
- @import:传统的文件引入方式,可能导致全局命名冲突和重复加载。
- @use:现代的模块化引入方式,提供了更好的作用域管理和避免重复加载。
- @forward:与
@use
结合使用,用于将一个模块的成员公开给其他模块,提供了一种筛选和重命名成员的方法。
作用
从其他Sass样式表加载mixin,function和变量,并将来自多个样式表的CSS组合在一起,@use加载的样式表被称为“模块”,多次引入只包含一次。
@use也可以看作是对@import的增强
语法
@use '<url>' [as alias|namespace]
加载普通SCSS、CSS
use下面的_common.scss
$font-size:14px !default;
* {
margin: 0;
padding: 0;
font-size: $font-size;
color: #333;
}
@function column-width($col, $total) {
@return percentage($col/$total);
}
@mixin bgColor($bg-color:#f2f2f2) {
background-color: $bg-color;
}
use下面的about.css
h1 {
font-size: 24px;
}
使用
@use 'use/common';
@use 'use/about';
加载模块
新增_global.scss
$font-size:28px;
@mixin base($color:#F00) {
color: $color;
}
.gclass {
background-color: #F00;
}
@import的方式
@import 'use/common';
@import 'use/global';
@import 'use/global';
body {
font-size: $font-size;
@include base('#FFF');
@include base('#000');
width: column-width(3, 12);
@include bgColor('#F00');
}
@use的方式
@use 'use/common';
@use 'use/global' as g1;
@use 'use/global' as g2;
body {
font-size: common.$font-size;
@include g1.base('#FFF');
@include g2.base('#000');
width: common.column-width(3, 12);
@include common.bgColor('#F00');
}
通过@use引入的样式默认把文件名作为模块名使用,你可以通过as的形式重新取一个别名
@use取消别名
可能@use “” as * 来取消命名空间,这种方式加载的模块被提升为全局模块
注意:这种方式慎用
@use 'use/common';
@use 'use/global' as *;
@use 'use/global' as g2;
body {
font-size: $font-size;
@include base('#FFF');
@include g2.base('#000');
width: common.column-width(3, 12);
@include common.bgColor('#F00');
}
定义私有成员
如果加载的模块内部有变量只想在模块内使用,可使用-或_定义在变量头即可
例如:
$-font-size:14px;
* {
margin: 0;
padding: 0;
font-size: $-font-size;
color: #333;
}
@use 'use/common';
@use 'use/global' as *;
@use 'use/global' as g2;
body {
font-size: common.$-font-size; // 报错 Error: Private members can't be accessed from outside their modules.
@include base('#FFF');
@include g2.base('#000');
}
定义默认值
通过!default能变量定义默认值
$font-size:14px !default;
* {
margin: 0;
padding: 0;
font-size: $font-size;
color: #333;
}
@use引入时可通过with(…)修改默认值
@use 'use/common' with ( $font-size:16px, );
@use 'use/global' as *;
@use 'use/global' as g2;
common.$font-size:28px; // 也可能通过这种方式覆盖
body {
font-size: common.$font-size;
@include base('#FFF');
@include g2.base('#000');
}
默认加载index.scss
一个文件夹模块下,通过在此文件夹下设置index.scss文件(index引入模块下的scss文件),使用此模块时直接通过
@use 'use/index';
调用
创建_index.scss
@use 'common' with ( $font-size:16px, );
@use 'global' as *;
@use 'global' as g2;
common.$font-size:28px; // 也可能通过这种方式覆盖
body {
font-size: common.$font-size;
@include base('#FFF');
@include g2.base('#000');
}
使用
@use 'use/index';
@use使用总结
- @use引入同一个文件多次,不会重复引入,而@import会重复引入
- @use引入的文件都是一个模块,默认以文件名作为模块名,可通过as alias取别名
- @use引入多个文件时,每个文件都是单独的模块,相同变量名不会覆盖,通过模块名访问,而@import变量会被覆盖
- @use方式可通过 @use ‘xxx’ as *来取消命名空间,建议不要这么做
- @use模块内可通过 − 或 - 或 −或来定义私有成员,也就是说或者-开头的Variables mixins functions 不会被引入
- @use模块内变量可通过!default 定义默认值,引入时可通用with(…)的方式修改
- 可定义-index.scss或_index.scss来合并多个scss文件,它@use默认加载文件
- 使用的是url(正斜杠/)而不是path(反斜杠\)
技巧:
1、查看Live Sass Compiler使用的是哪种sass编译模式
C:\Users\Administrator.vscode\extensions\ritwickdey.live-sass-3.0.0\node_modules\sasslib 自己的安装目录视情况而定
2、查看当前你的命令行sass编辑器是哪种编译模式
sass --version