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

概述所以我理解之前有一个类似的问题被提出过： Structure a stylesheet to manage skins or themes虽然我认为由于 kapsula无法正确表达(他/她)自我,因此被认为不清楚. 我正在处理一个包含多个CSS / LESS文件的大型项目.我们已经将很多单片CSS文件分解为针对特定页面的CSS的单独CSS文件以及每页上常见元素的常见CSS文件(菜单,图像占位符等) 所以我理解之前有一个类似的问题被提出过： Structure a stylesheet to manage skins or themes虽然我认为由于 kapsula无法正确表达(他/她)自我,因此被认为不清楚.

我正在处理一个包含多个CSS / LESS文件的大型项目.我们已经将很多单片CSS文件分解为针对特定页面的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文件,从中继承并再次保存,以便生成新的CSS.

有更有效的方法吗？或者我正在以不正确的方式进行主题化.我应该说明我想要做多少一点吗？

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

总结

以上是内存溢出为你收集整理的html – 如何使用LESS来管理多个网站主题全部内容，希望文章能够帮你解决html – 如何使用LESS来管理多个网站主题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。