在Joomla! 3中找到的许多新特性之一是LESS的实现。许多人听说过LESS，知道它是什麼，以及如何使用它，但对于那些有兴趣学习（或重温）的人来说，以下是一些关于LESS的优点以及如何在Joomla!中实现的指南。

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还有其他使用方式，但为了文章的长度，我们将不讨论其他示例，而是转向如何在Joomla!模板中使用LESS。如果您对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）过程的时髦术语。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的力量编写您的下一个模板。