在 Joomla! 3 的众多新特性中，也包括了 LESS 的实现。有些人可能已经听说过 LESS，甚至可能已经了解它，并知道如何使用它。对于所有想了解 LESS 的一般知识（或者只是想更新他们的知识）的人来说，本文提供了一个概述，并展示了 LESS 在 Joomla! 中的实现方法。

LESS 是一种动态样式表。为了理解 LESS，将 PHP 语言与之进行比较可能是有意义的。与 PHP 一样，由服务器解释并作为 HTML 输出一样，LESS 由软件解释并作为 CSS 输出。就这么简单。

更确切地说，LESS 实际上是一种扩展 CSS 功能性的工具。以下文章将介绍 LESS 的三个功能：变量、混合和函数。

变量

使用 LESS，可以定义一组变量，然后在整个样式表中重复使用。以下定义了三个变量，并展示了如何在 CSS 中使用它们。

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

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

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

当编译器读取此代码时，它会生成常规的 CSS 代码，看起来就像我们习惯的那样。

就这么简单。这个例子可能既没有显示很大的优势，也没有显示显著的时间节省，但在一个包含数百行 CSS 的完整模板的上下文中，将颜色、边框宽度、半径等快速更改会变得非常简单：只需在文件开头更改一个变量 - 因此更改仅在一个位置进行。

混合

混合可以说是一种将一组完整样式指令应用到另一个 CSS 指令上的独特方式。在某种程度上，这类似于变量，但现在我们包括了一个整个样式，而不是单个值。这看起来是这样的：

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

.thinborder 样式现在可以继续使用

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

如何轻松地确定，这里可以更改每个参数（或一个都不更改）。每个未重写的参数将被默认值替换（例如上面的示例中是1px宽度）。同样，这里需要注意的是，这是一个编写大量CSS而不重复许多（且易出错）的CSS文件的绝佳方法。简单地编辑原始样式也会在这里替换整个样式表中的所有派生样式。

函数

最后，我们来看看LESS的函数。LESS函数对变量执行简单操作。函数可以进行乘法、除法、加法和减法。因此，它们是一种强大的方法，可以从简单的样式元素创建派生样式，这些样式可以用于特定目的的修改。让我们看以下示例

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


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

因此，可以通过LESS函数轻松地将定义的标准样式用于模板中的特定情况，而无需每次都重新构建包含所有CSS定义的样式。

上面的示例显示了定义背景色的一个情况，现在可以根据情况计算性地改变。在这种情况下，背景色和边框色都通过从定义的变量@background派生的计算操作来改变。

LESS还有许多其他功能，我们在这里只想展示几个例子。现在，我们来看看如何在Joomla！模板中应用LESS。有关更多信息和建议，可以访问官方LESS页面：https://lesscss.org.cn。

LESS如何在Joomla！模板中实现

Joomla！3包含一个JUI库，位于/media目录下。此目录包含所有可用的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样式，就可以将整个LESS文件编译成一个CSS文件，该文件包含模板的所有样式。为了编译LESS，需要一个编译器。但这不应该吓倒任何人，它只是一个表达最终必须有一个过程的说法，这个过程可以解析LESS特定的变量、混合和函数，并从中生成有效的CSS代码。提供的Joomla！模板使用一个专门为此目的编写的轻量级平台应用程序。该代码可在Joomla！CMS的GitHub目录中供个人使用

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

此文件包含一个特殊的doExecute函数，该函数可以根据标准的Joomla！类（JLess）编写CSS文件。执行此函数后，将所有CSS文件写入模板。就这么简单。

总结

这里描述的整个过程对于普通用户来说并不太技术化。一切都是相对容易理解的，并且你会对它如何无缝集成感到惊讶。人们，今天就开始写LESS吧。利用JUI / LESS目录中现有的类，用强大的LESS编写你的下一个模板。

本文原创于David Hurley，发表于Joomla！社区杂志2013年3月