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步

根据您的案例main.css和test.css为您拥有的不同主题创建多个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文件夹中，所以我个人不希望破坏这种模式，所以我会创建一个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;
}

如果您认为这有用或者您有任何其他问题或疑虑，请与我们联系。

使用SASS创建主题（地图）

1 个答案: