第十节: SASS @use 的使用

SASS @use 的使用

@use是在Sass 1.23.0版本中引入的,用于替代@import

  • @import:传统的文件引入方式,可能导致全局命名冲突和重复加载。
  • @use:现代的模块化引入方式,提供了更好的作用域管理和避免重复加载。
  • @forward:与@use结合使用,用于将一个模块的成员公开给其他模块,提供了一种筛选和重命名成员的方法。

作用

从其他Sass样式表加载mixin,function和变量,并将来自多个样式表的CSS组合在一起,@use加载的样式表被称为“模块”,多次引入只包含一次。

@use也可以看作是对@import的增强

语法

@use '' [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

你可能感兴趣的:(#,sass,sass,前端)