大前端

主题

@use ​

作用 ​

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

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

语法 ​

scss
@use "<url>" [as alias|namespace];

加载普通 SCSS、CSS ​

use 下面的common.scss

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

css
h1 {
  font-size: 24px;
}

使用

scss
@use "use/common";
@use "use/about";

加载模块 ​

新增_global.scss

scss
$font-size: 28px;
@mixin base($color: #f00) {
  color: $color;
}

.gclass {
  background-color: #f00;
}

@import 的方式 ​

scss
@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 的方式 ​

scss
@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 "<url>" as * 来取消命名空间，这种方式加载的模块被提升为全局模块

注意：这种方式慎用

scss
@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");
}

定义私有成员 ​

如果加载的模块内部有变量只想在模块内使用，可使用-或_定义在变量头即可

例如：

scss
$-font-size: 14px;
* {
  margin: 0;
  padding: 0;
  font-size: $-font-size;
  color: #333;
}
scss
@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 能变量定义默认值 ​

scss
$font-size: 14px !default;
* {
  margin: 0;
  padding: 0;
  font-size: $font-size;
  color: #333;
}

@use 引入时可通过 with(...)修改默认值 ​

scss
@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

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");
}

使用

scss
@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 默认加载文件

技巧：

1、查看 Live Sass Compiler 使用的是哪种 sass 编译模式

C:\Users\Administrator.vscode\extensions\ritwickdey.live-sass-3.0.0\node_modules\sasslib 自己的安装目录视情况而定

2、查看当前你的命令行 sass 编辑器是哪种编译模式

sass --version

vs code 使用 Easy Sass Autocompile 插件 ​

配置

json
{
  "easySassAutocompile.sassBinLocation": "D:\\node-v13.12.0-win-x64\\node_modules\\sass\\sass.dart.js",
  "easySassAutocompile.subFolder": "../css",
  "easySassAutocompile.sourceMap": false
}