第十节： SASS @use 的使用

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