使用 SASS（地图）创建主题

Question

我是 SASS 新手，我正在努力让用户能够为网站选择不同的主题。我创建了一个如下所示的地图：

$theme-map: ( 
   main-theme: (
      primary: #007991,
      secondary: #55D3AE,
      tertiary: #D35555,
      gradientFirstColour: #007991,
      gradientSecondColour: #34EBE9
), 
   test-theme: (
      primary: #1abc9c,
      secondary: #e67e22,
      tertiary: #c0392b,
      gradientFirstColour: #2c3e50,
      gradientSecondColour: #f1c40f
   )
)

现在我不知道如何遍历这些然后将它们应用到特定元素。示例：我想选择主主题，然后使用原色作为按钮的背景，使用副色作为 div 的背景，和我选择测试主题时一样。有人可以帮帮我吗？

提前致谢！

Answer 1

我相信有很多方法可以实现这一点，我过去做过类似的事情，所以这是我的实现。

第 1 步

为您拥有的不同主题创建多个 CSS 输出文件，在您的情况下为 main.css 和 test.css。您也可以在名称前加上前缀以使其更易于理解，例如 theme-main.css 和 theme-test.css。

我建议将一般样式（如重置、边距、排版）保留在一个文件中，例如 global.css，然后将您的主题添加到单独的文件中。在 HTML 中将这些 CSS 文件叠加加载。

主题：

<link href="global.css" rel="stylesheet" type="text/css">
<link href="theme-main.css" rel="stylesheet" type="text/css">

和测试主题：

<link href="global.css" rel="stylesheet" type="text/css">
<link href="theme-test.css" rel="stylesheet" type="text/css">

在项目的 Sass 文件夹中，创建 theme-main.scss 和 theme-test.scss，以及 global.scss。

第 2 步

将您的主题颜色移动到不同的部分 Sass 文件中，并确保变量的名称相同。我会亲自在项目的 Sass 文件夹中创建名称与我的 CSS 输出文件匹配的文件夹，并将这些文件放在那里。

在您的情况下，在 Sass 文件夹中创建 _theme-main 和 _theme-test 文件夹。在每个文件夹中创建一个文件，将它们都命名为_variables.scss，内容如下：

在_theme-main/_variables.scss:

$colors: (
    primary: #007991,
    secondary: #55D3AE,
    tertiary: #D35555,
    gradientFirstColour: #007991,
    gradientSecondColour: #34EBE9
);

在_theme-test/_variables.scss:

$colors: (
    primary: #1abc9c,
    secondary: #e67e22,
    tertiary: #c0392b,
    gradientFirstColour: #2c3e50,
    gradientSecondColour: #f1c40f
);

第 3 步

在您需要的文件中加载必要的变量。

在您的文件theme-main.scss 中，输入：

@import '_theme-main/variables';

然后在你的文件theme-test.scss 中输入：

@import '_theme-test/variables';

到目前为止，这确保了不同的主题文件可以使用相同变量的不同值。其实变量$colors在这两个主题文件中只是被称为相同的，实际上它们并不相同。

第 4 步

使用您要应用主题的样式创建一个部分 Sass 文件。

因为我们已经把theme-main.scss的依赖放到了_theme-main文件夹，theme-test.scss的依赖放到了_theme-test文件夹，我个人是不想打破这个模式的，所以我会创建一个@987654348 @ 文件夹或类似的东西，并将导入的部分 Sass 文件放在多个 Sass 文件中。你当然可以跳过这个，但我相信这有助于让你的项目更易于维护。

继续您的示例，创建一个名为 _styles.scss 的部分 Sass 文件并将其放入您的 shared 文件夹中。将以下代码放入其中：

button {
    background-color: map-get($colors, primary);
}

div {
    background-color: map-get($colors, secondary);
}

现在你需要做的就是在你的主题文件中导入这个部分文件。

在您的文件theme-main.scss 中，输入：

@import '_theme-main/variables';
@import 'shared/styles';

然后在您的文件theme-test.scss 中输入：

@import '_theme-test/variables';
@import 'shared/styles';

如果我没有犯任何错误，您的输出 CSS 文件应如下所示：

theme-main.css:

button {
    background-color: #007991;
}

div {
    background-color: #55D3AE;
}

theme-test.css:

button {
    background-color: #1abc9c;
}

div {
    background-color: #e67e22;
}

如果您觉得这很有用，或者如果您有任何其他问题或疑虑，请告诉我。