目錄

一、@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語句前對模塊變量重新賦值【此方法兼容性一般】