Question

我正在为joomla开发一个新模板，并决定使用Gantry框架。使用它的mai问题是，我不太了解css / less结构。我需要了解它，这样我才能让它更干燥，更容易维护。我在不同的css / less文件中找到了不同的覆盖。我真的不懂逻辑。有人可以解释一下css / less的结构如何？这是全局较少的文件:(希望这给出了关于结构的ideea）

@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";

感谢。

Answer 1

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

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

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

Answer 2

@import行“header-@{headerstyle}.less”;给我们一个线索，从global.less你可以根据后端的用户选择加载不同的主题。

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

Joomla Gantry css / less结构

2 个答案: