Joomla Gantry css / less 结构答案

【问题标题】：Joomla Gantry css / less structureJoomla Gantry css / less 结构
【发布时间】：2014-06-08 02:28:12
【问题描述】：

我正在为 joomla 开发一个新模板，并决定使用 Gantry 框架。使用它的主要问题是我不太了解 css/less 结构。我需要了解它，这样我才能使它更干燥且易于维护。我在不同的 css/less 文件中发现了不同的覆盖。我真的不明白其中的逻辑。有人可以解释一下 css/less 的结构吗？这是全局的less文件：（希望这能提供一个关于结构的想法）

@import "jui/less/mixins.less";

// Core variables and mixins
@import "variables.less";
@import "mixins/index.less";

// Core and Grid
@import "gantry-core.less";
@import "joomla-core.less";

// Template core styling and layout
@import "template.less";
@import "style.less";
@import "header-@{headerstyle}.less";
@import "jui/less/font-awesome/font-awesome.less";
@import "utilities.less";
@import "prettify.less";
@import "offline.less";
@import "error.less";
@import "jui/less/bootstrap-overrides.less";

谢谢。

【问题讨论】：

您查看过 Gantry 网站上的“LESS CSS”文档吗？ gantry-framework.org/documentation/joomla/advanced/less_css.md
是的，我没有发现任何相关内容。

标签： css joomla less

【解决方案1】：

这是一团糟，我同意。它显然不是为最终用户编写的，而且它肯定不是 DRY。根据我的经验，Gantry 的 LESS 写得非常糟糕，这表明对如何负责任地或高效地使用预处理器缺乏了解，并在此过程中产生了一些可怕的输出。

如果您想要轻量级和可维护的 LESS，您最好自己编写，从头开始。

我使用 Gantry 构建的最后一个模板我禁用了他们的 LESS 编译器，删除了他们的 LESS 文件并改为放入我自己的 Sass 框架中。

【讨论】：

【解决方案2】：

@import "header-@{headerstyle}.less" 行；为我们提供了一条线索，即您可以从 global.less 中加载不同的主题，具体取决于后端的用户选择。

基本上，您可以通过查看每个文件导入的内容来跟踪文件继承。

【讨论】：