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

如果要从主样式中区分颜色或与主题相关的任何内容，则基本上有两个选择：

首先使用默认颜色，默认字体等构建基本的main.css。然后为每个主题创建一个单独的文件，在其中您可以用包括主题颜色在内的规则覆盖所有使用默认颜色的规则。最后，您将拥有一个main.css和一个theme-a.css，一个theme-b.css，依此类推...依次切换主题时，您将必须加载适当的主题CSS文件。
您可以使用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;
}

编译不同主题的SASS

1 个答案: