如果你用的是 Chrome 浏览器，我们可以查看一下模块上的元素 ... 点击 右键 .. 审查元素 .. 你会看到，这个模块的元素上，添加了一个 box1 的 css 类 ..

在右边，你会看到 box1 这个类上定义的样式 ... background 定义了背景是白色 ... border 定义了一个灰色的边框 ...

要注意的是，这些 css 样式所在的样式表 .. 是 master 后面一串随机的数字 .. 这一看就知道，应该是压缩之后的 css 样式表 ..

Gantry 架构里使用了 LESS ，他可以让我们把编程的思想应用到 CSS 上 ... 下面我们可以简单的理解一下 LESS ...

LESS

先打开 Joomla 所在的目录 .. templates .. 模板所在的目录 ... 找到 gantry 模板 ... 然后再打开 LESS .. 这里面有一些 less 后缀的文件 ... 这些文件里定义了模板所需要的样式 ..

我们可以打开一个 less 文件看一下 .. 比如打开这个 style.less ... 我知道这个 less 文件里定义了模块的样式 .. 搜索一下 box1 ...

你看发现，这块样式跟普通的 css 样式差不多，不过里面使用了一些变量 .. 比如这个 @bodycontrast ... 我们可以去定义这个变量的值 ...

然后把它应用在需要的样式里 .. Gantry 架构里包含了 LESS 的编译工具，也就是它可以把这些 LESS 文件，编译成普通的样式表 ...

回到模板目录的下面 ... 打开 variables.less ...

在这个文件里定义了所有 LESS 文件里需要用到的变量 ...

找到这个 @bodycontrast ... 这个变量的值是 #ffffff ... 也就是一个十六进制的颜色值，代表白色 ...

如果我们改变了这个变量的值，那么所在使用这个变量的样式，都会继承这个改变 ... 我们可以试一下 ...

改成 #000000 ... 这个值代表黑色 .... 保存一下 ... 回到网站前台 ... 刷新 ...

你会发现应用了 box1 类的模块的背景会变成黑色 ... 因为定义 box1 的 less 里，用到了 @bodycontrast 这个变量 ... 我们把这个变量的值修改成了黑色 ... Gantry 重新编译 LESS 生成普通的 CSS 样式表 ..

box1 的背景也就会变成黑色了。

重新编译的 CSS 样式表，会在 Gantry 模板下面的 css-compiled 这个目录里 ...

在这里，你会看到一些普通的 CSS 样式表 ... 这里面的样式表你是可以删除掉的 ... 每次修改了 LESS 文件，都会重新编译生成 CSS 样式表放在这个目录里面。

Gantry 模板架构的后台提供了几个 LESS 相关的选项 ..

回到管理后台 ... 扩展 ... 模板管理 ... Gantry ... 打开 高级 ...

最下面有一个 LESS 编译工具 ... 比如我们可以开启 CSS 压缩功能 ... 这样编译工具会压缩，编译以后生成的 CSS 样式表 ... 压缩以后的样式表的体积会小一些 ...

回到前台刷新一下 ...

再回到模板所在目录 .... 这里面多了一个 master 开头的样式表 ... 这个样式表是压缩之后的 ... 你看发现它的体积要比之前的 master 样式表小一些 ...

如果你想更详细的了解一下 LESS ，可以参考这个地址 http://www.lesscss.net/