@use

從其他 Sass 樣式表中加載 mixins、函數(shù)和變量，并將來自多個(gè)樣式表的 CSS 組合在一起。@use加載的樣式表被稱為“模塊”。

加載成員

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

// style.scss
@use "src/corners";.button {@include corners.rounded;padding: 5px + corners.$radius;
}

選擇命名空間

默認(rèn)情況下，模塊的命名空間只是其 URL 的最后一個(gè)組成部分，沒有文件擴(kuò)展名。但是，有時(shí)您可能想要選擇不同的命名空間——您可能想要為經(jīng)常引用的模塊使用較短的名稱，或者您可能正在加載具有相同文件名的多個(gè)模塊。你可以通過寫@use "<url>" as <namespace>，來做到這一點(diǎn)。

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

甚至可以通過編寫@use "<url>" as *.不過，建議只對(duì)編寫的樣式表執(zhí)行此操作；否則，可能會(huì)引入導(dǎo)致名稱沖突的新成員！

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

// style.scss
@use "src/corners" as *;.button {@include rounded;padding: 5px + $radius;
}

私有成員

如果你想讓一個(gè)成員對(duì)整個(gè)包而不是單個(gè)模塊私有，只是不要從你的包的任何入口點(diǎn)轉(zhuǎn)發(fā)它的模塊（你告訴用戶加載以使用你的包的樣式表）。您甚至可以在轉(zhuǎn)發(fā)其模塊的其余部分時(shí)隱藏該成員！

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

配置

樣式表可以使用!default標(biāo)志定義變量，以使其可配置。要加載帶有配置的模塊，使用@use<url>with加載<variable>:<value>,<variable>:<value>樣式，配置的值將覆蓋變量的默認(rèn)值。

// _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
);

使用 Mixin

使用@use ... with，配置模塊非常方便，尤其是在使用編寫的庫時(shí)，@import規(guī)則。但它并不是特別靈活，不建議將其用于更高級(jí)的用例。如果發(fā)現(xiàn)自己想要一次配置多個(gè)變量，將映射作為配置傳遞，或者在模塊加載后更新配置，請(qǐng)考慮編寫一個(gè)mixin來設(shè)置您的變量，然后再編寫一個(gè)mixin來注入樣式。

// _library.scss
$-black: #000;
$-border-radius: 0.25rem;
$-box-shadow: null;/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow() {@return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}@mixin configure($black: null, $border-radius: null, $box-shadow: null) {@if $black {$-black: $black !global;}@if $border-radius {$-border-radius: $border-radius !global;}@if $box-shadow {$-box-shadow: $box-shadow !global;}
}@mixin styles {code {border-radius: $-border-radius;box-shadow: -box-shadow();}
}

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

重新賦值變量

加載模塊后，可以重新賦值其變量。

// _library.scss
$color: red;

// _override.scss
@use 'library';
library.$color: blue;

// style.scss
@use 'library';
@use 'override';
@debug library.$color;  //=> blue

如果使用as *，給該模塊中定義的變量賦值，將覆蓋其在該模塊中的值。