Joomla! Documentation™

大多數的 Joomla 3.0 預設佈景主題樣式是使用 LESS 來編寫的，然後才轉譯為我們最後所看到的 CSS 檔案。

哪裡可以找到 .less 樣式表及轉譯器？

.less 檔案主要是放置在 media/jui/less/中。而每個佈景主題的 .less 檔案則是位於templates/<templates>/less/。

至於 CSS 生成封裝腳本，LESS 轉譯器以及其他類似的產生工具則是在 GitHub的Joomla原始檔案中的 build/ 路徑中。如要了解更多關於使用 GitHub 的資訊請參閱 Git for Coders。另外 build 目錄只提供於 Joomla 原始檔案裡，不包含在正式發佈版本的 Joomla。

如何重新產生 CSS 樣式

要從 Joomla 核心發行版重新產生所有的 CSS 檔案，您將需要執行產生腳本來做為 CLI 應用程式。

例如：

cd joomla-cms/build
c:\xampp\php\php.exe generatecss.php

轉譯自己的 LESS 檔案到佈景主題中

To compile less files for your own template, you will need to take a copy of the generatecss.php script and adjust it to suit your template.

Alternatively you can use a LESS Compiler plugin which compiles your .less files automatically on page reload: http://extensions.joomla.org/extensions/miscellaneous/development/22424

More alternatives and tools on a recent Joomla! Magazine article: http://magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less

Not all LESS compilers are equal

The LESS compiler used for the Joomla core for code style consistency is obtained from leafo.net/lessphp.

If you're working on your own template you can use any compiler you like.

Difference CSS vs LESS imports

The main .less file and starting point e.g. in protostar is located in

/templates/protostar/less/template.less

If you open that file you will find many @imports in this file - imports from many different places. Unlike imports in CSS, imports in LESS get compiled to a single CSS file. This will result in fewer http requests and speed your site up.

From existing CSS to LESS / import CSS files

You may want to add your existing CSS files and classes to your LESS powered template or start with what you have. All CSS declarations are compatible with LESS so you can just rename your .css files to .less and you can compile and use them. You can then step by step make use of the great dynamic features LESS has to offer: variables, mixins, operations and functions. See http://www.lesscss.org

Notice: the examples below reference the default Protostar template for clarity. Your paths may be different. Notice: If you want to customize Protostar template it is a good idea to copy the template and customize it afterwards - so that Joomla! updates do not overwrite your customizations.

方式 1：匯入您的 .css 作為 .less 檔案

（有點麻煩但蠻值得，個人意見啦）

Now lets assume you want to include your custom files and get them parsed by LESS compiler - you do NOT need to rewrite your .css to LESS because plain .css works as well. The only thing you have to do is to rename your .css files to .less and add an @import statement into above mentioned main /templates/protostar/less/template.less

I assume you put your custom .css files renamed to .less into the /templates/protostar/less folder. Now you open /templates/protostar/less/template.less and at the bottom of the file you import your custom .less files so that they override existing declarations:

@import "modules.less";
@import "components.less";
@import "articles.less";

If you now compile your main template.less file you end up with one main template.css optimized and minified (if you wish). You also reduced your http requests and the site should load faster. Now you can start step by step in your custom.less files to use less variables and other cool stuff http://lesscss.org has to offer.

方式 2：直接匯入您的 .css / 在覆寫中將不會有效果

在 /templates/protostar/less/template.less just import your .css files and they will be included as imports into main template.css:

@import "../css/modules.css";
@import "../css/components.css";
@import "../css/articles.css";

But this way you do not get any optimization. And a big issue is that this import is always on top before other declarations - so you can't override an existing declaration.

更多資訊：http://lesscss.org/#usage (Section Importing)

參考

http://kyleledbetter.com/jui/less/ - 示範如何建立自己的 template.less