如何防止在導入 sass 中的另一個部分之前編譯變量？

Question

這個問題似乎有點棘手，但就我而言，這是分解我的代碼的好方法。

我希望我的代碼在 page1.sass、page2.sass 等幾個主題中從部分 _global.sass 中拒絕，而不是直接在代碼中重新定義主題的變量。 這樣，我只會在最終 sass 文件的開頭重新影響變量，而不是在每次需要更改時在每一頁上更改代碼。

為此，我認為我必須找到一種方法來阻止 _global.sass 編譯其變量，以便我可以在 pageX.sass 文件中重新定義它們並最終編譯它們。

在部分 _variables.sass 文件中

$bg-color-page1: black
$bg-color-page2: red
$bg-color-page3: blue
$bg-color-page4: yellow
// etc.
$bg-color-page-global: grey /* you're obliged to affect a value when you declare a variable

在部分 _global.sass 文件中

@import variables

body
    background-color: $bg-color-page-global

在最終的 sass 文件、pageX 或 page1.sass 中

@import variables
@import global

$bg-color-page-global: $bg-color-page1

body
    background-color: $bg-color-page-global

使用此代碼，使用 pageX.cass 文件的每個頁面的背景都是灰色的，因為 _global.sass 的代碼是在他導入 pageX.sass 之前編譯的。 我希望它適應，page1.sass 為黑色背景，page2.sass 等為紅色。

您現在是否有一種方法可以防止在將部分導入另一個 sass 文件之前編譯變量？

感謝您的寶貴幫助。

Answer 1

使用 sass 默認密鑰並使用@use和@forward ，不推薦使用@import

1. 創建style/main.scss

 @use "modules/yourModule";

2. 使用 !default 在style/settings/_settings.scss中創建顏色變量

 $color1: #000;default: $color2; #fff !default;

3. 覆蓋style/modules/_yourModule.scss中的默認值

 @use 'sass:map'; @use '../settings/settings'; // overwrite here $color1: #ccc; .yourModule { color: $color1; }

希望有幫助。