我有两个相当大的网站，它们的结构相同，但品牌不同。构造/构建CSS以避免重复文件带来的维护噩梦的最佳方法是什么？
例如，如果我有两个css文件，如site-1和site-2，它们是由包含不同品牌的两个较少的文件生成的，我可以根据正在运行的网站加载正确的文件。然而，我仍然需要在2个不同的文件中进行两次更改/在2个地方添加新的东西等。
有什么办法可以避免这种情况吗？
更具体一点：
我想要如下的东西：
两个无变量文件（colors1和colors2）和一个站点文件（比如站点结构）。
每个变量文件中的变量将被完全相同地调用。
然后我会有站点1和站点2更少的文件。在站点1中，我将有两个导入语句导入站点结构和导入颜色1。这并不是真正的类语句，因为这些语句只是用于生成的。
颜色文件的导入会覆盖网站结构文件中的颜色，所以我有一个生成的网站1文件，该文件标记为colors1。
颜色也是如此2。
然后我只需要添加任何更改到1个文件（网站结构）并重新生成我的网站1和网站2文件
问题是，我需要将变量文件导入到站点结构文件中，以便进行编译。
所以我想我的问题可能是，有没有办法在Less/Sass中进行这种覆盖，或者有更好的方法吗？
感谢
我以前使用过类似的设置，我们使用的是LESS。
我们有两个主要的.less文件，其中每个文件都为特定站点导入一个"变量"文件。例如site1.less导入variables-site1、site2.less导入variables-site2。
这意味着你将有两个编译的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
网站的内容1.less：
@import "var1";
@import "shared";
站点的内容2.less：
@import "var2";
@import "shared";
shared.less的内容：
h1{
color: @header-colour;
}
这样你就可以在shared.less中获得所有共享内容，site1和site2文件只是构建文件的入口点，var1和var2是你的变量文件。
希望这能帮助
您可以有一个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文件