@use
是在Sass 1.23.0版本中引入的,用于替代
@import
- @import:传统的文件引入方式,可能导致全局命名冲突和重复加载。
- @use:现代的模块化引入方式,提供了更好的作用域管理和避免重复加载。
- @forward:与
@use
结合使用,用于将一个模块的成员公开给其他模块,提供了一种筛选和重命名成员的方法。
从其他Sass样式表加载mixin,function和变量,并将来自多个样式表的CSS组合在一起,@use加载的样式表被称为“模块”,多次引入只包含一次。
@use也可以看作是对@import的增强
@use '' [as alias|namespace]
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 '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/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 “” 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');
}
$font-size:14px !default;
* {
margin: 0;
padding: 0;
font-size: $font-size;
color: #333;
}
@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文件),使用此模块时直接通过
@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';
技巧:
1、查看Live Sass Compiler使用的是哪种sass编译模式
C:\Users\Administrator.vscode\extensions\ritwickdey.live-sass-3.0.0\node_modules\sasslib 自己的安装目录视情况而定
2、查看当前你的命令行sass编辑器是哪种编译模式
sass --version