SCSS

常用 SCSS 变量

// 边框
$border-base: #dedede;

// 文字
$color-base: #222;
$color-desc: #909090;
$color-disabled: #bfbfbf;

$primary: #177bd0;
$danger: #f55e6c;
$warning: #e6a23c;
$success: #67c23a;
$primary-hover: darken($primary, 5);
$success-hover: lighten($success, 5);

// 文字大小
$font-lg: 18px;
$font-md: 16px;
$font-base: 14px;
$font-sm: 12px;
$font-mini: 10px;

@use

从其他 scss 样式表加载 mixin ， function 和 变量 ，并将来自多个样式表的 CSS 组合在一起。其命名空间会基于文件名自动生成，也可以进行自定义命名。如果使用了 as * ，那么这一模块就处于全局命名空间，可以直接使用其中的变量和 mixin 。

// src/corners.scss
$radius: 3px;
@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners" as corners;

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

@use 与 @import 的区别:

@import

嵌套 import 会导致重复的 css 代码
没有命名空间，css 中的选择器又天然是全局的，为了避免重名，不能使用简写的 class name ，因此起名总是非常冗长
没有私有函数的概念，库作者无法确保他们的私有工具函数不会被使用者直接获取

@use

不管使用了多少次样式表，@use 都只会引入和执行一次
@use 是有命名空间的，而且只在当前样式表中生效
以—或者_开头的命名空间被认为是私有的，不会被引入其他样式表

with

在 @import 的时代，很多样式库都需要用户配置全局变量来覆盖用 !default 定义的默认变量。在改为使用 @use 之后，变量不再是全局的了，因此配置变量可以使用更有针对性的 with 语句。with 语句只允许设置被引入模块中已经被定义的默认变量.

// bootstrap.scss
$paragraph-margin-bottom: 1rem;

p {
  margin-top: 0;
  margin-bottom: $paragraph-margin-bottom;
}

// my-style.scss
@use 'bootstrap' with ($paragraph-margin-bottom: 1.5rem)

@forward

@forward 语句可以引入另一个模块的所有变量、mixins 和函数，将它们直接作为当前模块的 API 暴露出去，而不会真的在当前模块增加代码. 类似于一个传输中转站，把上下游的成员变量无缝连接起来。

本页目录

常用 SCSS 变量 @use with @forward