HTML如何表现网站主题,html – 如何使用LESS来管理多个网站主题

有一种更灵活的方式,但你需要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是主题名称,用橙色,黑色或任何主题名称替换它们)：