Question

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

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

有什么方法可以避免这种情况吗？

更具体一点：

我想要以下内容：

两个可变较少的文件（colours1和colours2）和一个站点文件（站点结构说）。

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

然后我会减少site1和site2文件。在site1中，我将有2个import语句导入site-structure和import colours1。这些都不是实际的类声明，因为它们只是用于生成。

导入颜色文件会覆盖网站结构文件中的颜色，因此我生成了一个使用colours1标记的site1文件。

同样对于colours2。

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

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

所以我想我的问题可能是有一种方法可以在Less / Sass中执行此覆盖，还是有更好的方法来执行此操作？

由于

Answer 1

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

我们有两个主要.less个文件，其中每个文件都导入一个＆＃34;变量＆＃34;特定网站的文件。例如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是您的变量文件。

希望这有帮助

Answer 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文件进行编辑，如果需要，只需更改网站 .less文件中的颜色变量