Joomla! 3 中发现的新功能之一是 LESS 的实现。许多人已经听说过 LESS，知道它是什么，以及如何使用它，但对于那些想要学习（或重温）的人来说，以下是一些关于它的好处以及如何在 Joomla! 中做 LESS 的指南。

LESS 是一个动态样式表。将 LESS 视为类似于 PHP 可能有助于理解 LESS。与 PHP 由服务器解释并输出相应的评估后的 HTML 类似，LESS 由服务器解释并输出相应的 CSS。就这么简单。

更具体地说，LESS 通过一系列额外的功能扩展了 CSS。本文将重点介绍三个功能：变量、混入和函数。

变量

使用 LESS，您可以指定一组可以在整个样式表中重用的变量。以下我们将定义三个变量，并展示它们如何在模板中使用。

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

一旦定义了这些变量，就可以在任何地方稍后使用它们。

a.readon 
{
 color: @secondary;
}
h1 
{
 color: @primary;
 border: 1px solid @bordercolor;
}

当服务器读取代码时，它会输出类似于您通常看到的 CSS 代码。

就这么简单。从这个例子中可能看不出来这非常有用或节省时间，但在一个包含数百行代码的完整模板中，通过简单地更改文件顶部的单个变量来更改样式变得极其容易。

混入

这是一种将完整的样式集添加到另一个样式中的说法。在某种程度上，它与变量非常相似，只是现在我们包括的是整个样式，而不是单个值。以下是一个技术示例。

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px) 
{
 border: @width solid @color;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}

这可以按以下方式使用

.moduletable {
 .thinborder(2px,#336699);
}

如您所注意到的，您可以修改任何或所有参数。任何未定义的参数将使用默认值（在上面的例子中，宽度默认为 1px）。再次强调，这提供了一种出色的方法，可以在没有大量额外样式行的情况下管理样式表。再次强调，只需更改默认样式，就会更新整个样式表中相应的每一行。

函数

最后要考虑的是 LESS 中的函数特性。LESS 函数是一种让你对变量进行简单操作的方法。我们可以使用乘法、除法、加法和减法。这是一种创建单个样式并轻松在整个样式表中重用该样式的极强方法，同时仍然能够根据独特情况调整样式。以下是一个示例：

//Define variables
@borderwidth : 2px;
@background : #222222;


.moduletable {
 background-color: (@background / 4);
 border: (@borderwidth + 1) solid (@background * 2);
}

通过创建这种样式并添加 LESS 功能到特定情况，我们可以在整个样式表中快速创建标准化的样式，同时在需要时仍能保持独特的情况。

上述代码演示了这样一种情况，我们设置了一个默认的背景颜色，然后使用这个背景颜色根据需要创建变体。在这个具体示例中，我们利用背景颜色来使用边界颜色和背景颜色作为变体。

LESS 还可以用在其他方式中，然而为了文章的长度，我们不会查看其他示例，而是转向讨论 LESS 如何在 Joomla! 模板中使用。如果你对 LESS 有更多问题，可以查看官方网站上的更多信息，https://lesscss.org.cn。

LESS 在 Joomla! 模板中的实现

Joomla! 3 在根媒体文件夹中包含一个 JUI 库。该文件夹包含所有可用的核心 LESS 文件。Joomla! 模板可以通过将这些文件导入模板特定的 LESS 文件中来使用它们。以下是一个导入这些文件的示例

// CSS Reset
@import "../../../media/jui/less/reset.less";
// Grid system and page structure
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";
// Base CSS
@import "../../../media/jui/less/type.less";
@import "../../../media/jui/less/code.less";
@import "../../../media/jui/less/forms.less";
@import "../../../media/jui/less/tables.less";

可用的文件导入完整列表可以在此找到
http://jui.kyleledbetter.com/

一旦你将你想要在模板中使用的基 LESS 类导入，并添加了自己的 LESS 样式，然后你可以编译一个单一的 template.css 文件来控制整个网站，使用一个统一的外观。为了编译你的 LESS 样式，你需要运行一个编译器来生成 CSS 文件。不要被编译的概念吓到。这只是一个术语，用来定义从 LESS 文件（记住所有那些变量、混入和函数都必须被解析并写入为正常 CSS）中写入 CSS 文件的过程。Joomla! 默认模板使用一个小的 Joomla! 平台应用程序来生成它们的 CSS，并且代码可以从 Joomla! CMS 的 GitHub 目录中复制和使用，用于个人模板样式。

https://github.com/joomla/joomla-cms/blob/master/build/generatecss.php

此文件包含一个单一的 doExecute 函数，当运行时，将基于标准的 Joomla! 类（JLess）写入 CSS 文件。运行它并生成你的 CSS，你全新的模板样式表就准备好了。

总结来说

不要认为这个过程过于技术性而不适合实际使用。它相当容易理解，并且你会惊讶于其实施的简单性。今天就开始编写 LESS 文件吧。利用根 JUI / LESS 文件夹中可用的格式化功能，并用 LESS 的力量编写你的下一个模板。