如何在 sass unsing sass 模塊功能中創建多個主題？

Question

在將模塊引入 sass 之前，您可以通過以下方式制作主題樣式表：

主題Dark.scss：

$color: black;

基按鈕.scss：

button {
  color: $color;
}

按鈕.scss：

@import './_themeDark.scss'
@import './_baseButton.scss'

現在，模塊被引入到 sass 中，@ @import已被棄用。 如何使用sass模塊達到同樣的效果？

我正在尋找一種解決方案，其中一些文件用作部分樣式表。 在主文件中，它們組合在一起形成將被導入的最終樣式表。

我嘗試過的：

• 使用@use而不是@import 。 它不起作用，因為看不到來自其他模塊的變量。
• 使用混合。 問題是您必須通過參數傳遞所有變量，並且比上面使用@import的解決方案更難維護。

Answer 1

您可以使用 scss 映射來存儲所有主題

$themes: (
  theme1: (color: red),
  theme2: (color: orange),
  theme3: (color: yellow),
  theme4: (color: green),
  theme5: (color: blue)
);

使用這個地圖是一個@each循環。

@each $theme, $map in $themes {
  .#{$theme} {
    color: map-get($map, color);
  }
}

在每個循環中，將這些值分別分配給$theme和$map 。

$theme - 主題名稱$map - 所有主題變量的$map

您現在使用map-get()函數從$map獲取任何主題變量並為每個主題輸出正確的屬性。

@each $theme, $map in $themes {
  .#{$theme} & { // <--- Notice the & here!
    color: map-get($map, color);
  }

}