如何使用LESS来管理多个网站主题

Question

所以我理解之前已经提出了类似的问题：Structure a stylesheet to manage skins or themes虽然我认为由于kapsula无法正确表达（他/她）自我，但这被认为不清楚。

我正在处理一个包含多个CSS / LESS文件的大型项目。我们已将许多单片CSS文件分解为特定于某些页面的CSS以及每页上常见元素的常见CSS文件（菜单，图像占位符等）。

我们希望为项目合并多个主题，因此我们决定采用以下结构：

在基本目录中，我们拥有特定于项目中所有页面的所有CSS / LESS，除了我们在主题目录中设置的基本目录中的颜色。

所以它看起来有点影响：

-CSS
  - ORANGE [directory]
    -> classic.less
    -> controls.less
  -> classic.less
  -> controls.less

在ORANGE目录中的classic.less文件中，我们只需插入指令@import "../classic.less"，并在保存文件时生成CSS，其中包含ORANGE->classic.less文件中规定的所有可爱的颜色主题。

因此虽然这个过程在管理文件方面节省了一些工作，但每次我在基本目录中进行更改（也许我在前端添加了一个新的元素类型）我必须进入每个LESS文件继承自它并再次保存，以便生成新的CSS。

有更有效的方法吗？或者我正在以不正确的方式进行主题化。我应该说明一下我想要做些什么吗？

Answer 1

有一种更灵活的方式，但你需要WinLess（也许它可以用其他东西来做，我只是发现它可以满足我的需求），这需要Windows。如果你搜索，应该有其他类似的东西。

我所做的是，在我的项目的CSS或Stylesheet文件夹中，我创建了另一个名为LessBase的文件夹。在这里，我保留核心样式表。例如：

-Stylesheets
  -LessBase
    ->jquery-ui.less
    ->forms.less
    ->buttons.less
    ->grids.less
    ->widgets.less
    ->etc

然后，在Stylesheets文件夹中，您需要包含各个主题的其他文件夹。以前一个例子为基础：

-Stylesheets
  -LessBase
    ->jquery-ui.less
    ->forms.less
    ->buttons.less
    ->grids.less
    ->widgets.less
    ->...
    ->all.less
  -Orange
    ->color-theme.less
    ->main.css
  -Black
    ->color-theme.less
    ->main.css

请注意all.less文件。这个用于导入LessBase：

中的所有文件

@import "buttons.less";
@import "forms.less";
etc

color-theme.less基本上会保留所有颜色。在LessBase内，您的所有.less文件都将包含将在主题文件夹中的每个color-theme.less文件中定义的变量。

您的color-theme.less文件可能如下所示：

@main_color: #edf123;
@secondary_color: #daa123;
@border_color: #e7e7e7;
.
.
.
@import "../LessBase/all.less"

all.less的导入必须在最后，以便定义变量。

然后，在WinLess中，您将color-theme.less编译到放置在相应主题文件夹中的main.css。

这是一个带有示例的屏幕截图（我模糊了sctructure。另外，default_1, default_2是主题名称，用orange, black或任何主题名称替换它们：