【SASS/SCSS（二）】模块化语法

目录

一、@use

1、命名空间

2、私有变量

3、用with改变模块中的默认值

二、@forward

1、给forward模块起别名，让成员加前缀

2、利用hide or show手动控制成员的可访问性 

三、@import

1、不存在命名空间，成员变量在import之后直接公开

2、可以在嵌套语法中使用import

3、@import不可以用with进行配置，如果需要可以在@import语句前对模块变量重新赋值【此方法兼容性一般】

---

Sass中的模块化主要是指外部的scss、sass文件可以作为模块导入到其他文件中。 

如果一个自定义的sass、scss文件，仅作为库模块引入，那么我们的取名可以用短下划线开头 _，这样该文件不会自动去编译加载，而是仅会在被引用之后被编译。这样的文件我们称为Partial（代码片段）。

如果在一个文件夹下（例如名为folder）定义 _index.scss 或者 _index.sass ，导入 folder（即直接导入文件夹名），其会自动解析文件夹中的index文件并导入

而模块中被定义的variables、functions、mixins则被称作member（成员）。

模块的导入和使用主要由@use、@forward、@import三种语法来实现

*注意：三者导入的都是URL，而非file_path，可以自动解析相对定位。一些内置模块可以直接导入使用。

一、@use

1、命名空间

• @use导入模块后，若在本文件调用模块中的成员，需要在以 模块名.成员  的形式访问

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}


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

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

• 可以用as给模块取别名，而 as * 代表无需访问模块名，可直接调用内部成员

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

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

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

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}


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

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

2、私有变量

模块里可以定义私有变量 ， 形如  $-*  或者  $_*，导入后，外部无法访问模块内该私有变量。

// src/_corners.scss
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}


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

.button {
  @include corners.rounded;

  // This is an error! $-radius isn't visible outside of `_corners.scss`.
  padding: 5px + corners.$-radius;
}

对于非私有变量，模块被调用后，不仅可以访问，还可以重新赋值。

如果再次调用模块中的成员，将会是重新赋值后的值

3、用with改变模块中的默认值

// _library.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;
}



// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

但是，如果 A @use B ， B  @use C，A是无法访问C模块中的成员的！如果要使得 C在A和B模块间通用，就需要使用下面的 @forward 

二、@forward

@forward本质是转发模块资源，是用于组织各文件中模块资源的方法。

但它本身的调用并不直接加载、编译scss文件，只是让模块中的资源经过导入后可公开访问

1、给forward模块起别名，让成员加前缀

给各模块的成员加上前缀，可以明确成员变量的来源，解决冲突

// src/_list.scss
@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}


// bootstrap.scss
@forward "src/list" as list-*;


// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

2、利用hide or show手动控制成员的可访问性 

hide代表模块中被hide的成员不可公开访问；show代表模块中仅仅只有被show的成员可公开访问

形如：

// src/_list.scss
$horizontal-list-gap: 2em;

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

@mixin list-horizontal {
  @include reset;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: $horizontal-list-gap;
    }
  }
}


// bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;

3、可以修改模块中的默认值，之后也能为@use...with再度修改

@use...with不可以加 !default字段，是因为这已经处于要将模块编译的阶段。

但@forward在配置时，则可以加该字段：

// _library.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;
}


// _opinionated.scss
@forward 'library' with (
  $black: #222 !default,
  $border-radius: 0.1rem !default
)

三、@import

@import作为css也支持的语法，已经在被慢慢淘汰，现在最推荐的还是用@use对模块进行导入。

但一些scss才支持的@import特性，还是值得我们了解~

1、不存在命名空间，成员变量在import之后直接公开

这也是最危险的一点，一旦import之后，成员均可直接访问而不存在模块化的命名空间，容易导致冲突。

2、可以在嵌套语法中使用import

在选择器嵌套中导入import，可以使得样式仅在当前选择器作用域下生效

// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

//_library.scss
p {
    color: red;
}


//boot.scss
div {
   @import "theme","library";
   width: 20px;
}

*可以用逗号分隔导入文件，一次性导入多个！

3、@import不可以用with进行配置，如果需要可以在@import语句前对模块变量重新赋值【此方法兼容性一般】