css - 为不同的主题编译SASS

Question

我有一个包含 2 个主题的网站，我们称它们为“A”和“B”。两个主题的 CSS 之间大约有 98% 的 CSS 重叠，所以我将所有内容都转换为使用 SASS，这样我就可以只为两个主题之间需要不同的数据引入变量。例如，这是我的“main.scss”的片段

@import '_colors.scss';
body {
    font-family: $font-name;
    background-color: $secondary-color;
}

H1, H2, H3, H4, H5, H6 {
    color: $primary-color;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
    text-transform: none;
    letter-spacing: 0px;
}

所以在查看上面的样式时，您可以看到我有变量 $font-name、$primary-color 和 $secondary-color。

我的问题是，我如何才能让样本 SASS 只放在一个文件中，但导入适当的主题 scss 文件来定义 $font-name、$primary-color 和 $secondary-color？

我的目录结构是:

/Content/Themes
     ThemeA
         /main.scss 
         /_colors.scss <-- specific colors to this theme
     ThemeB
         /main.scss 
         /_colors.scss  <-- specific colors to this theme 

这工作正常，我的问题是两个 main.scss 文件是相同的，只有 _colors.scss 文件不同，所以好消息是我正在转换成 CSS，但我只想要一个main.scss 文件，现在它要求每个文件都位于其适当的品牌目录中。

我怎样才能简化它，使我只有一个 main.scss？

Answer 1

如果你想从你的主要风格中分离颜色或任何与主题相关的东西，你基本上有两个选择:

1. 首先使用默认颜色、默认字体等构建一个基本的 main.css。其次为每个主题创建一个单独的文件，您可以在其中使用包括您的主题在内的规则覆盖所有具有默认颜色的规则颜色。最后你会得到一个 main.css 和一个 theme-a.css，一个 theme-b.css 等等。 . 然后，无论何时切换主题，您都必须加载适当的主题 css 文件。

2. 您可以使用 css 自定义属性来代替，也称为 css 变量。参见 this page了解更多信息。好处是您将能够在运行时更改这些自定义属性的值，而您的 main.css 可以保持不变。然而，缺点是目前并非所有浏览器都支持它们。这看起来像这样:

在你的main.css中:

body {
    font-family: var(--font-name);
    background-color: var(--secondary-color);
}

H1, H2, H3, H4, H5, H6 {
    color: var(--primary-color);
}

在您的主题文件中，例如对于主题 A:

:root {
    --font-name: Arial, Helvetica, sans-serif;
    --primary-color: #bada55;
    --secondary-color: deeppink;
}

在您的主题文件中，例如对于主题 B:

:root {
    --font-name: Courier, monospace;
    --primary-color: skyblue;
    --secondary-color: maroon;
}