Joomla! 3的许多新功能之一是实现了LESS。当然，你们中的许多人已经听说过LESS，知道它是怎么回事，如何使用它以及如何使用它，但对于那些想学习（或更新记忆）的人来说，以下是一些关于其优点和在Joomla中使用方法的概述。

LESS是一种动态样式表。为了理解LESS，把它与PHP语言类比可能会有所帮助。就像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函数是您在变量上执行简单操作的一种方式。我们可以使用乘法、除法、加法和减法。这是创建独特样式并轻松在整个样式表中重用此样式的一种非常强大的方式，同时还能根据特定情况操纵样式。以下是一个示例

//Definir les 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在根目录的media文件中集成了一个JUI库。这个文件夹包含所有核心的LESS文件，可供使用。Joomla模板可以导入这些文件到模板特定的LESS文件中。以下是一个导入示例

// CSS Reset
@import "../../../media/jui/less/reset.less";

// 网格系统和页面结构
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";

// 基础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://kyleledbetter.com/jui/less/上找到

一旦您导入了您模板所需的LESS基础类，并添加了您自己的LESS样式，然后您可以编译成一个单一的template.css文件来检查整个站点的统一样式。为了编译您的LESS样式，您需要运行一个编译器来生成CSS文件。不要让编译过程吓到您。这只是一个术语，指的是将LESS文件（记住所有这些变量、混入和函数）转换为CSS经典文件的过程。Joomla的默认模板使用一个Joomla平台的小型应用程序来生成它们的CSS，该代码可在CMS Joomla的GitHub存储库中复制和使用。

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

此文件包含一个独特的doExecute函数，在执行时，将根据Joomla!（JLess）的类规范写入CSS文件。运行它并生成CSS，然后，您的模板全新的样式表就准备好了！

总结来说

请不要认为这个过程过于技术化而无法实际使用。它相当简单易懂，您可能会对其简单易用的特点感到惊讶。如果还没有开始，现在就着手编写LESS文件吧。利用JUI/LESS根目录下的现有样式，用LESS的力量编写您的下一个模板。