CSS 管理 2 个站点的不同配色方案答案

【问题标题】：CSS manage different colour schemes for 2 sitesCSS 管理 2 个站点的不同配色方案
【发布时间】：2016-08-05 17:52:31
【问题描述】：

我有 2 个相当大的网站，它们的结构相同，但品牌不同。构建/构建我的 CSS 以避免通过复制文件造成维护噩梦的最佳方法是什么？

例如，如果我有 2 个 css 文件，例如 site-1 和 site-2，它们是从包含不同品牌的 2 个较少文件生成的，我可以根据正在运行的站点加载正确的文件。但是，我仍然需要在 2 个不同的文件中进行两次更改/将新内容添加到 2 个不同的地方等。

有什么办法可以避免吗？

更具体一点：

我想要类似下面的东西：

两个变量较少的文件（colors1 和 colours2）和一个站点文件（比如站点结构）。

每个变量文件中的变量将被称为完全相同的东西。

然后我将拥有更少的 site1 和 site2 文件。在站点 1 中，我将有 2 个导入语句导入站点结构和导入颜色 1。这都不是实际的类语句，因为这些只是用于生成。

颜色文件的导入将覆盖站点结构文件中的颜色，因此我生成了一个带有 colours1 品牌的 site1 文件。

对于 colours2 也是如此。

然后我只需对 1 个文件（站点结构）添加任何更改并重新生成我的站点 1 和站点 2 文件

问题是我需要将变量文件导入到站点结构文件中才能编译。

所以我想我的问题可能是有没有办法在 Less/Sass 中进行这种覆盖，或者有更好的方法吗？

谢谢

【问题讨论】：

标签： css sass less

【解决方案1】：

我之前使用过类似的设置，我们使用的是LESS。

我们有 2 个主要的 .less 文件，每个文件都在为特定站点导入一个“变量”文件。例如site1.less 导入 variables-site1，site2.less 导入 variables-site2。

这意味着您将拥有 2 个已编译的 CSS 文件，您可以分别将它们用于您的两个网站。

编辑：这里是一个例子：https://plnkr.co/edit/HcGRVgFdm1LfxQOCdGY0?p=preview 您可以从以下位置更改示例中的链接标记：

<link rel="stylesheet/less" type="text/css" href="site1.less" />

到：

<link rel="stylesheet/less" type="text/css" href="site2.less" />

查看页面的变化。

在示例中，您有以下文件：

--site1.less
 -var1.less

--site2.less
 -var2.less

--shared.less

site1.less 的内容：

@import "var1";
@import "shared";

site2.less 的内容：

@import "var2";
@import "shared";

shared.less 的内容：

h1{
  color: @header-colour;
}

这样你就拥有了shared.less中的所有共享内容，site1和site2文件只是构建文件的入口点，var1和var2是你的变量文件。

希望对你有帮助

【讨论】：

您也可以使用与sass 完全相同的设置
虽然这是一个答案，但这已经是我正在做的事情（并希望避免）......这并不能解决我仍然必须维护 2 个站点文件的问题（这正是除了颜色相同）.. 我真的只想要 2 个变量文件和 1 个站点文件，我可以从中生成 2 个特定文件.. 我会编辑我的问题
我认为我的建议与您正在寻找的内容很接近，我会在今天晚些时候尝试将一个示例放在一起
这就是我想要的，但你确定它会编译吗？变量 header-color 不存在于 shared 中，也没有导入 shared 中，所以 shared 肯定不会编译？
错过了你的例子......让我看看

【解决方案2】：

您可以拥有一个main.less 文件和两个site1.less 和site2.less。

在这些文件中定义颜色变量，然后导入 main.less 文件

@main_color: #aabbcc;
@secondary_color: #aabbdd;
@tertiary_color: #abcdee;
.
.
.
@import "path to main.less"

这样，您可以继续只对 main.less 文件进行编辑，如果需要，只需更改 site .less 文件中的颜色变量

【讨论】：