引入SASS模塊

SASS剛剛啟動了您可能會從其他語言中識別的主要新功能：模塊系統。對於@Import來說，這是向前邁出的一大步。最常用的野味之一。雖然當前的@Import規則允許您拉動第三方軟件包，並將Sass分為可管理的“部分”，但它有一些限制：

• @Import也是CSS功能，差異可能令人困惑
• 如果您@Import多次使用相同的文件，則它可能會減慢彙編，導致衝突並生成重複輸出。
• 一切都在全局名稱空間中，包括第三方軟件包 - 因此，我的color（）函數可能會覆蓋您現有的color（）函數，反之亦然。
• 當您使用諸如color（）的函數時。不可能確切知道它的定義位置。它來自哪個@Import？

SASS軟件包作者（像我一樣）試圖通過手動將我們的變量和功能前綴來解決名稱空間問題，但是SASS模塊是一個更強大的解決方案。簡而言之，@Import將被更明確的@USE和@forward規則替換。在接下來的幾年中，Sass @Import將被棄用，然後刪除。您仍然可以使用CSS導入，但不會由Sass編譯。不用擔心，有一個遷移工具可以幫助您升級！

用@USE導入文件

@USE'buttons';

新的@USE類似於@Import。但是有一些明顯的差異：

• 該文件僅導入一次，無論您在項目中使用多少次。
• 從下劃線（_）或連字符（ - ）開始的變量，混合素和功能（Sass稱為“成員”）被視為私有，而不是導入。
• 來自使用的文件（在這種情況下為button.scss）的成員僅在本地可用，但不傳遞給未來進口。
• 同樣，@Extends只會應用鏈條；在導入的文件中擴展選擇器，但不擴展導入該文件的文件。
• 所有導入的成員默認為命名。

當我們 @使用文件時，SASS會根據文件名自動生成名稱空間：

 @USE'buttons'; //創建一個“按鈕”名稱空間
@use'表單'; //創建一個“形式”名稱空間

現在，我們可以訪問兩個按鈕。 scssand forms.scssss.scss-但在導入之間沒有傳輸訪問：forms.scss仍然無法訪問按鈕中定義的變量。 Scs.scss.scss。由於導入的功能是命名的，因此我們必須使用新的時期劃分語法來訪問它們：

 //變量：。 $變量
$ btn-color：按鈕。 $顏色;
$ form-b​​order：form. $ input-broder;

//函數： .function（）
$ btn-background：buttons.background（）;
$ form-b​​order：forms.border（）;

// mixins：@include  .mixin（）（）
@include buttons.submit（）;
@include forms.input（）;

我們可以通過將其添加為嚮導入更改或刪除默認名稱空間：

 @USE'按鈕'as *; //星星刪除任何名稱空間
@use'forms'作為f;

$ btn-color：$ color; //按鈕。 $顏色沒有名稱空間
$ form-b​​order：f。 $ input-broder; //表單。帶自定義名稱空間的$輸入儀

使用AS *在根名稱空間中添加一個模塊，因此不需要前綴，但是這些成員仍在本地範圍範圍內範圍範圍內。

導入內置的SASS模塊

內部SASS功能也已移至模塊系統，因此我們可以完全控制全局名稱空間。有幾個內置模塊 - 數學，顏色，字符串，列表，地圖，選擇器和元模塊 - 必須在文件使用之前明確導入：

 @USE'SASS：MATH';
$一半：Math.percentage（1/2）;

SASS模塊也可以導入到全局名稱空間：

 @USE'SASS：MATH'as *;
$一半：百分比（1/2）;

內部功能已經具有前綴的名稱，例如map-get或str-Index。可以在不復制前綴的情況下使用：

 @USE'SASS：MAP';
@USE'SASS：String';
$ map-get：map.get（（'鍵'：'value'），'鍵'）;
$ str-index：string.index（'string'，'i'）;

您可以在SASS模塊規範中找到內置模塊，功能和名稱更改的完整列表。

新的和更改的核心功能

作為附帶的好處，這意味著SASS可以安全地添加新的內部混合素和功能而不會引起名稱衝突。此版本中最令人興奮的例子是一個sass：元混合蛋白稱為load-css（）。這與@USE相似，但僅返回生成的CSS輸出，並且可以在我們代碼中的任何地方動態使用：

 @USE'SASS：META';
$主題名稱：“黑暗”；

[data-theme ='＃{$ tremy-name}'] {
  @include meta.load-css（$ themem-name）;
}

第一個參數是一個模塊URL（例如@use），但可以通過變量動態更改，甚至包括插值，例如主題-USTEM-＃{$ name}。第二個（可選）參數接受配置值地圖：

 //加載前在“主題/dark”中配置$ base-color變量
@include meta.load-css（
  “主題/黑暗”， 
  $ with ：（'base-color'：rebeccapurple）
）；

$ with參數接受加載模塊中任何變量的配置鍵和值，如果這兩者都是：

• 一個不以_或 - （現在用來表示隱私）開頭的全局變量）
• 標記為！默認值，要配置

// them/_dark.scss
$ base-color：black！默認值； //可用於配置
$ _private：true！默認值; //不可用，因為私人
$ config：false; //不可用，因為未標記為！預設值

請注意，“基本”鍵將設置$ base-color變量。

還有兩個SASS：元函數是新的：模塊 - 變量（）和模塊 - 函數（）。每個都從已經符合的模塊中返回成員名稱和值的地圖。這些接受一個與模塊名稱空間匹配的參數：

 @use'表單';

$ form-vars：模塊變量（'forms'）;
//（（
//鈕扣彩色：藍色，
//輸入 -  border：薄，
//）

$ form-intuntions：模塊 - 函數（'forms'）;
//（（
//背景：獲取功能（'背景'），
//邊界：獲取功能（'Border'），
//）

其他幾個SASS：META函數 - 全局變量 - exists（），function-exists（），mixin-exists（）和get-function（） - 將獲得其他$模塊參數，允許我們明確檢查每個名稱空間。

調整和縮放顏色

Sass：顏色模塊也有一些有趣的警告，因為我們試圖擺脫一些遺產問題。許多遺產捷徑像Lighten（）。或者現在對調整態（）進行棄用，以支持顯式color.adjust（）和color.scale（）函數：

 //以前減輕（紅色，20％）
$ LIGHT-RED：COLOR.ADJUST（紅色，$ Lightness：20％）;

//以前的調整 - 紐帶（紅色，180攝氏度）
$補充：顏色。

其中一些舊功能（例如調節性）是多餘的，不必要的。其他人 - 像淡化。變暗。飽和。等等 - 需要通過更好的內部邏輯進行重新構建。原始功能基於調整（）。使用線性數學：在上面的示例中，將當前的紅色輕度添加20％。在大多數情況下，我們實際上希望相對於當前價值擴展（）輕度縮放一百分點：

 // 20％到白色的距離，而不是當前輕度20
$ LIGHT-RED：COLOR.SCALE（紅色，$ Lightness：20％）;

一旦完全棄用和刪除，這些快捷函數最終將以基於color.scale（）而不是color.adjust（）的新行為重新出現SASS：顏色。這是在階段發生的，以避免突然倒退的變化。同時，我建議您手動檢查您的代碼，以查看color.scale（）可能對您更有效的位置。

配置導入的庫

第三方或可重複使用的庫通常會帶有默認的全局配置變量供您覆蓋。我們曾經在導入之前用變量來做到這一點：

 // _buttons.scss
$顏色：藍色！預設值;

// old.scss
$顏色：紅色；
@Import'按鈕';

由於使用的模塊不再可以訪問本地變量，因此我們需要一種設置這些默認值的新方法。我們可以通過將配置映射添加到@USE：

 @USE'按鈕'with（（
  $顏色：紅色，
  $樣式：'flat'，
）；

這類似於load-css（）中的參數$。但是，我們使用變量本身，而不是使用變量名稱，而是從$開始。

我喜歡這是多麼明確的配置，但是有一個規則使我絆倒了幾次：只能將模塊配置一次，這是第一次使用它。即使對於@Import，進口訂單對於Sass仍然很重要。但是這些問題總是默默失敗。現在，我們有一個明確的錯誤，這既好，有時令人驚訝。確保在任何“入口點”文件（導入所有部分的中央文檔）中首先將庫@USE和配置，以便這些配置在庫的其他@USE之前進行編譯。

（當前）不可能將配置“鏈”配置在一起，同時保持它們可編輯，但是您可以將配置的模塊和擴展名包裝，並將其作為新模塊傳遞。

用@forward傳遞文件

我們並不總是需要使用文件並訪問其成員。有時我們只想將其傳遞給未來的進口。假設我們有多個與形式相關的部分，我們希望將它們全部導入一個名稱空間。我們可以用@forward做到這一點：

 // forms/_index.scss
@forward'input';
@forward'textarea';
@forward'select';
@forward的“按鈕”;

當前文檔中沒有轉發文件的成員，也沒有創建名稱空間，但是當另一個文件想要@USE或@forward整個集合時，這些變量，函數和Mixins將可用。如果轉發的部分包含實際的CSS，則它也將通過無生成輸出直至使用軟件包的情況下傳遞。那時，它將被視為具有單個名稱空間的單個模塊：

 // styles.scss
@use'表單'; //在“形式”名稱空間中導入所有轉發成員

注意：如果您要求SASS導入目錄，它將尋找名為索引或_index的文件）

默認情況下，所有公共成員將使用一個模塊轉發。但是，我們可以通過添加表演或隱藏子句來更具選擇性，並命名特定的成員以包括或排除：

 //僅轉發“輸入”邊框（）mixin和$ border-color變量
@forward的“輸入”節目邊界，$ border-color;

//轉發所有“按鈕”成員 *除了 * gradient（）函數
@forward'按鈕'隱藏梯度；

注意：當功能和混合物共享名稱時，它們會顯示並隱藏在一起。

為了澄清來源，或避免在轉發模塊之間命名衝突，我們可以在轉發時使用部分前綴成員：

 // forms/_index.scss
// @forward“ <url>”為<prefix>  - *;
//假設兩個模塊都包含一個背景（）mixin
@forward'輸入'作為輸入 - *;
@forward的“按鈕”為btn-*;

// style.scss
@use'表單';
@include forms.input-background（）;
@include forms.btn-background（）;</prefix></url>

而且，如果需要的話，我們始終可以通過添加兩個規則來@USE和@forward相同的模塊：

 @forward'forms';
@use'表單';

如果您想將庫與配置或任何其他工具包裝在將其傳遞給其他文件之前，這一點尤其有用。它甚至可以幫助簡化導入路徑：

 // _tools.scss
//僅使用庫一次，配置
@USE'ACCOUTREMT/SASS/工具'
  $ font-path：'../ fonts/'，
）；
//使用此部分轉發配置的庫
@forward'Accoutrement/Sass/Tools';

//在此處添加所有擴展名...


// _anywhere-else.scss
//導入已配置的包裝和擴展的庫
@USE'工具';

@USE和@forward必須在文檔的根（未嵌套）和文件開始時聲明。僅在導入命令之前出現@Charset和簡單的變量定義。

移至模塊

為了測試新的語法，我構建了一個新的開源SASS庫（級聯顏色系統）和一個為我的樂隊的新網站 - 都仍在建設中。我想將模塊理解為圖書館和網站作者。讓我們從使用模塊語法編寫網站樣式的“最終用戶”體驗開始。

維護和寫作風格

在網站上使用模塊很高興。新的語法鼓勵我已經使用的代碼體系結構。我所有的全局配置和工具導入都在一個單一目錄中（我稱其為配置），並帶有一個索引文件，可以轉發我需要的所有內容：

 // config/_index.scss
@forward'tools';
@forward'Fonts';
@forward's scale';
@forward的“顏色”；

當我構建網站的其他方面時，我可以在需要的任何地方導入這些工具和配置：

 //佈局/_banner.scss
@USE'../config';

.page-title {
  @include config.font-family（'header'）;
}

這甚至與我現有的Sass庫（如Accoutrement和Herman）一起使用，這些庫仍然使用舊的@Import語法。由於@Import規則將在一夜之間不會在任何地方替換，因此SASS已在過渡期內建立。現在可以使用模塊，但是@Import將不再棄用一兩年的棄用 - 此後僅將其從該語言中刪除。同時，這兩個系統將在任一方向上一起工作：

• 如果我們@Import一個包含新的 @use/ @forward語法的文件，則僅導入公共成員，而無需命名空間。
• 如果我們@USE或@forward一個包含Legacy @Import語法的文件，我們可以訪問所有嵌套導入作為單個名稱空間。

這意味著您可以立即開始使用新的模塊語法，而無需等待您喜歡的庫的新版本：我可以花一些時間來更新所有庫！

遷移工具

如果我們使用詹妮弗·塔卡（Jennifer Thakar）構建的遷移工具，則升級不應需要很長時間。它可以與節點，巧克力或自製者一起安裝：

 NPM安裝-G SASS移民
巧克力安裝薩斯移民
釀造安裝SASS/SASS/遷移器

這不是用於遷移到模塊的一次性工具。現在，Sass重新開始積極開發（見下文），遷移工具還將獲得定期更新，以幫助遷移每個新功能。最好在全球安裝它，並將其圍繞以備將來使用。

遷移器可以從命令行運行，並希望將其添加到Codekit和Scout等第三方應用程序中。將其指向單個SASS文件，例如style.scss。並告訴它要應用的遷移。此時，只有一個遷移稱為模塊：

 ＃Sass Emigrator  <entrypoint.scss ...>
SASS遷移模塊樣式</entrypoint.scss>

默認情況下，遷移者只會更新一個文件，但是在大多數情況下，我們需要更新主文件及其所有依賴項：導入，轉發或使用的任何部分。我們可以通過單獨提及每個文件或添加 - 移民DEPS標誌來做到這一點：

 Sass-Origrator-移民DEPS模塊樣式.scss

對於測試運行，我們可以添加-Dry-run -verbose（或簡稱-NV），並在不更改任何文件的情況下查看結果。我們還可以使用許多其他選項來自定義遷移，即使是專門用於幫助圖書館作者刪除舊手動名稱空間的選項，但我不會在這裡介紹所有這些空間。遷移工具已在SASS網站上充分記錄。

更新已發布的庫

我在圖書館方面遇到了一些問題，專門試圖使多個文件之間的用戶配置可用，並圍繞缺失的鍊式配置工作。訂購錯誤可能很難進行調試，但結果值得付出努力，我認為我們很快就會看到一些其他補丁。我仍然必須在復雜的軟件包上嘗試遷移工具，並可能為圖書館作者撰寫後續文章。

現在重要的是要知道的是，Sass在過渡時期涵蓋了我們。導入和模塊不僅可以一起工作，而且我們可以創建“僅導入”文件，為仍在@Import in in Importries的舊用戶提供更好的體驗。在大多數情況下，這將是主要軟件包文件的替代版本，並且您將需要並排： .scss for Module用戶，而 .import.scss for Legacy用戶。每當用戶調用@import 時，它將加載文件的.import版本：

 //加載_forms.scss
@use'表單';

//加載_forms.input.scss
@Import'forms';

這對於為非模塊用戶添加前綴特別有用：

 // _forms.import.scss
//在添加前綴時轉發主模塊
@forward“表單”為forms-*;

升級的雜種

您可能還記得，幾年前，Sass凍結了一個功能，以獲取各種實現（libsass，Node Sass，Dart Sass），並最終退休了原始的Ruby實施。凍結在去年結束，在Github上進行了幾個新功能，積極的討論和發展 - 但並不大。如果您錯過了這些發行版，則可能會陷入SASS博客上：

• CSS進口和CSS兼容性（DART SASS V1.11）
• 內容參數和顏色功能（Dart Sass V1.15）

Dart Sass現在是規範實現，通常是第一個實施新功能的實現。如果您想要最新的，我建議您進行切換。您可以安裝帶有節點，巧克力或自製的Dart Sass。它也可以很好地與現有的Gulp-Sass構建步驟相同。

就像CSS一樣（自CSS3以來），新版本不再有一個統一版本數。所有SASS實現都從相同的規範中運行，但是每個SASS實現都有獨特的發佈時間表和編號，並在Jina設計的美麗的新文檔中反映了支持信息。

截至2019年10月1日， SASS模塊可在Dart Sass 1.23.0中使用。

以上是引入SASS模塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！