Scss学习--关于Scss指令@use、@forward

@use

从其他Sass样式表加载mixin，function和变量，并将来自多个样式表的CSS组合在一起

// 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 “Address” as spacename;

Adress: scss文件路径
spacename: 命名空间(防止加载多个文件导致引用混淆)

私有类型数据

您作为样式表作者可能不希望您定义的所有成员在样式表之外都可用
使用Sass可以轻松地定义私有成员，方法是使用-或开头

$-colornumber:#fff;

dic{
    height: 100px;
}

@forward

// src/_list.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// bootstrap.scss
@forward "src/list" as list-* with (
  $black: #222 !default,
  $border-radius: 0.1rem !default
);
//@forward "url" as prefix 为URL调用增加前缀
//@forward "url" with (...) 给URL所指向文件传递参数
//@forward "url" as prefix with (...)
	//as关键字必须放在whither之前

// styles.scss
@use "bootstrap" as corner with ($black: #333);
//向引用文件中传递参数

li {
  @include corner.list-reset;
}