使用SASS创建主题（ Map ）-Java 学习之路

我是SASS的新手，我试图让用户能够为网站选择不同的主题 . 我创建了一个如下所示的 Map ：

$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的背景的辅助颜色，以及在选择测试主题时使用相同的颜色 . 有人可以帮帮我吗？

提前致谢！

1 回答

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

Step 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文件夹中，沿 global.scss 创建 theme-main.scss 和 theme-test.scss .

Step 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
);
```
Step 3

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

在您的文件 theme-main.scss 中，放置：
```
@import '_theme-main/variables';
```
并在您的文件 theme-test.scss 中，放置：
```
@import '_theme-test/variables';
```
到目前为止，这确保了不同的主题文件可以使用相同变量的不同值 . 事实上，变量 $colors 在这两个主题文件中被称为相同，实际上它们并不相同 .

Step 4

使用要应用主题的样式创建部分Sass文件 .

因为我们已经将 theme-main.scss 的依赖项放在 _theme-main 文件夹中，并且 _theme-test 文件夹中的 theme-test.scss 的依赖项，我个人不希望破坏这种模式，所以我会创建一个 shared 文件夹或类似的东西并放入导入的部分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;
}
```
如果您发现此内容有用或者您有任何其他问题或疑虑，请与我们联系 .
回复于 2024-05-15T07:32:21+08:00

使用SASS创建主题（ Map ）

1 回答

相关问题